@remotion/studio 4.0.525 → 4.0.526

package/dist/components/QuickSwitcher/QuickSwitcherResult.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuickSwitcherResult = exports.isQuickSwitcherResultSelectable = 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 noop_1 = require("../../helpers/noop");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
@@ -17,7 +16,7 @@ const composition_menu_items_1 = require("../composition-menu-items");
 const ContextMenu_1 = require("../ContextMenu");
 const layout_1 = require("../layout");
 const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
-const use_default_editor_info_1 = require("../use-default-editor-info");
+const use_open_in_menu_apps_1 = require("../use-open-in-menu-apps");
 const shared_1 = require("./shared");
 const isQuickSwitcherResultSelectable = (result) => {
     return result.type !== 'folder';
@@ -67,9 +66,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
     const onSelected = result.type === 'folder' ? null : result.onSelected;
     const composition = result.type === 'composition' ? result.composition : null;
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
-    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(connectionStatus === 'connected');
+    const { connectionStatus, openInApps } = (0, use_open_in_menu_apps_1.useOpenInMenuApps)();
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         if (composition === null) {
@@ -79,9 +76,8 @@ const QuickSwitcherResult = ({ result, selected }) => {
             closeMenu: noop_1.noop,
             composition,
             connectionStatus,
-            editorId: defaultEditorId,
-            editorName: defaultEditorName,
             includeCompositionManagementItems: true,
+            openInApps,
             resolvedLocation,
             setSelectedModal,
             readOnlyStudio: window.remotion_isReadOnlyStudio,
@@ -89,8 +85,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
     }, [
         composition,
         connectionStatus,
-        defaultEditorId,
-        defaultEditorName,
+        openInApps,
         resolvedLocation,
         setSelectedModal,
     ]);

package/dist/components/RenderModal/SchemaEditor/scroll-to-default-props-path.d.ts

@@ -2,3 +2,4 @@ import React from 'react';
 export declare const DEFAULT_PROPS_PATH_CLASSNAME = "__remotion-default-props-editor-label";
 export declare const DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME = "__remotion-default-props-editor-label-active";
 export declare const defaultPropsEditorScrollableAreaRef: React.RefObject<HTMLDivElement | null>;
+export declare const expandDefaultPropsEditorRef: React.RefObject<((onExpanded: () => void) => void) | null>;

package/dist/components/RenderModal/SchemaEditor/scroll-to-default-props-path.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultPropsEditorScrollableAreaRef = exports.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME = exports.DEFAULT_PROPS_PATH_CLASSNAME = void 0;
+exports.expandDefaultPropsEditorRef = exports.defaultPropsEditorScrollableAreaRef = exports.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME = exports.DEFAULT_PROPS_PATH_CLASSNAME = void 0;
 const react_1 = __importDefault(require("react"));
 exports.DEFAULT_PROPS_PATH_CLASSNAME = '__remotion-default-props-editor-label';
 exports.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME = '__remotion-default-props-editor-label-active';
 exports.defaultPropsEditorScrollableAreaRef = react_1.default.createRef();
+exports.expandDefaultPropsEditorRef = react_1.default.createRef();

package/dist/components/RenderModal/WebRenderModal.js

@@ -7,6 +7,8 @@ const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
+const client_id_1 = require("../../helpers/client-id");
+const settings_tab_availability_1 = require("../../helpers/settings-tab-availability");
 const audio_1 = require("../../icons/audio");
 const certificate_1 = require("../../icons/certificate");
 const file_1 = require("../../icons/file");
@@ -86,6 +88,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const { addClientStillJob, addClientVideoJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     if (!context) {
         throw new Error('Should not be able to render without resolving comp first');
     }
@@ -107,6 +110,11 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
             : 'still');
     const [tab, setTab] = (0, react_1.useState)('general');
     const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const canEditConfig = (0, settings_tab_availability_1.canEditStudioConfig)({
+        isBrowserStudio,
+        previewServerConnected: previewServerState.type === 'connected',
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+    });
     const [imageFormat, setImageFormat] = (0, react_1.useState)(() => initialStillImageFormat !== null && initialStillImageFormat !== void 0 ? initialStillImageFormat : 'png');
     const [frame, setFrame] = (0, react_1.useState)(() => initialFrame);
     const [logLevel, setLogLevel] = (0, react_1.useState)(() => initialLogLevel);
@@ -420,11 +428,11 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                     jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: onAddToQueue, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: ["Render ", renderMode, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" }), renderMode !== 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" }), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
+                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" }), renderMode !== 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" }), canEditConfig ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
                                     type: 'settings',
                                     initialTab: 'license',
                                     initialPublicLicenseKey: publicLicenseKey,
-                                }), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" }))] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
+                                }), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })) : null] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
                                 canUpdate: false,
                                 reason: 'render dialogue',
                                 determined: false,

package/dist/components/RendersTab.js

@@ -14,6 +14,7 @@ const row = {
     color: 'inherit',
     alignItems: 'center',
     flex: 1,
+    userSelect: 'none',
 };
 const badge = {
     height: 16,
@@ -23,6 +24,7 @@ const badge = {
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
+    userSelect: 'none',
 };
 const RendersTab = ({ selected, onClick }) => {
     const { jobs, captionJobs } = (0, react_1.useContext)(context_1.RenderQueueContext);

package/dist/components/SelectedOutlineElement.js

@@ -140,6 +140,8 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         selectComposition,
     ]);
     const onContextMenuOpen = react_1.default.useCallback(async () => {
+        var _a;
+        var _b;
         const contextMenuTarget = getTarget();
         if (contextMenuTarget === undefined) {
             return false;
@@ -170,10 +172,14 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
             previewServerState.type === 'connected';
         const canCrop = contextMenuTarget.canCrop && !sourceEditDisabled;
         const canRotate = !sourceEditDisabled;
+        const outlineElement = (_b = (_a = contextMenuTarget.sequence.refForOutline) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : null;
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
             canOpenInEditor,
             codingAgentInfo,
+            copyImageElement: contextMenuTarget.sequence.type === 'image'
+                ? outlineElement
+                : (0, get_sequence_context_menu_items_1.findCopyableFrameElement)(outlineElement),
             deleteDisabled: sourceEditDisabled,
             disableInteractivityDisabled,
             duplicateDisabled: sourceEditDisabled || isProgrammaticallyDuplicated,

package/dist/components/SettingsButton.js

@@ -4,7 +4,9 @@ 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 client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const settings_tab_availability_1 = require("../helpers/settings-tab-availability");
 const gear_1 = require("../icons/gear");
 const modals_1 = require("../state/modals");
 const ActionTooltip_1 = require("./ActionTooltip");
@@ -12,11 +14,18 @@ const InlineAction_1 = require("./InlineAction");
 const UpdateStatusContext_1 = require("./UpdateStatusContext");
 const SettingsButton = ({ showUpdates }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     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 isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const canEditConfig = (0, settings_tab_availability_1.canEditStudioConfig)({
+        isBrowserStudio,
+        previewServerConnected: previewServerState.type === 'connected',
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+    });
     const openModal = (0, react_1.useCallback)(() => {
         var _a;
         var _b;
@@ -24,12 +33,12 @@ const SettingsButton = ({ showUpdates }) => {
             type: 'settings',
             initialTab: updateAvailable
                 ? 'updates'
-                : (0, browser_studio_operations_1.getBrowserStudioOperations)() === null
+                : canEditConfig
                     ? 'studio'
                     : 'shortcuts',
             initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
         });
-    }, [setSelectedModal, updateAvailable]);
+    }, [canEditConfig, setSelectedModal, updateAvailable]);
     const renderGearIcon = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, width: 16, height: 16 });
     }, []);

package/dist/components/SettingsModal.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-type SettingsTab = 'apps' | 'rendering' | 'studio' | 'packages' | 'models' | 'shortcuts' | 'skills' | 'license' | 'updates';
+import { type SettingsTab } from '../helpers/settings-tab-availability';
 export declare const SettingsModal: React.FC<{
     readonly initialTab: SettingsTab;
     readonly initialPublicLicenseKey: string | null;
 }>;
-export {};

package/dist/components/SettingsModal.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const can_show_updates_1 = require("../helpers/can-show-updates");
 const client_id_1 = require("../helpers/client-id");
+const settings_tab_availability_1 = require("../helpers/settings-tab-availability");
 const apps_1 = require("../icons/apps");
 const cloud_download_1 = require("../icons/cloud-download");
 const keyboard_1 = require("../icons/keyboard");
@@ -77,8 +78,20 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     const packageManager = window.remotion_packageManager === 'unknown'
         ? null
         : window.remotion_packageManager;
-    const showPackages = (0, browser_studio_operations_1.canInstallPackages)() && (isBrowserStudio || packageManager !== null);
-    const safeInitialTab = initialTab === 'updates' && !showUpdates ? 'shortcuts' : initialTab;
+    const previewServerConnected = previewServerState.type === 'connected';
+    const canEditConfig = (0, settings_tab_availability_1.canEditStudioConfig)({
+        isBrowserStudio,
+        previewServerConnected,
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+    });
+    const availableTabs = (0, react_1.useMemo)(() => (0, settings_tab_availability_1.getAvailableSettingsTabs)({
+        isBrowserStudio,
+        packageManagerAvailable: packageManager !== null,
+        previewServerConnected,
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+        showUpdates,
+    }), [isBrowserStudio, packageManager, previewServerConnected, showUpdates]);
+    const safeInitialTab = (0, settings_tab_availability_1.getSafeSettingsTab)(initialTab, availableTabs);
     const [tab, setTab] = (0, react_1.useState)(safeInitialTab);
     const [openedTabs, setOpenedTabs] = (0, react_1.useState)([safeInitialTab]);
     const [packagesFooterContainer, setPackagesFooterContainer] = (0, react_1.useState)(null);
@@ -95,16 +108,21 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
         });
     }, []);
     (0, react_1.useLayoutEffect)(() => {
-        if (!showUpdates && tab === 'updates') {
-            selectTab('shortcuts');
+        const safeTab = (0, settings_tab_availability_1.getSafeSettingsTab)(tab, availableTabs);
+        if (safeTab !== tab) {
+            selectTab(safeTab);
         }
-    }, [selectTab, showUpdates, tab]);
+    }, [availableTabs, selectTab, tab]);
     (0, react_1.useEffect)(() => {
         setPublicLicenseKey(initialPublicLicenseKey);
     }, [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 === '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 ||
+                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [availableTabs.includes('studio') ? (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" })) : null, availableTabs.includes('rendering') ? (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" })) : null, 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" }), availableTabs.includes('packages') ? (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, availableTabs.includes('skills') ? (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" })) : null, availableTabs.includes('models') ? (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" })) : null, availableTabs.includes('apps') ? (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" })) : null, availableTabs.includes('license') ? (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" })) : null, availableTabs.includes('updates') ? (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] }), availableTabs.includes('packages') &&
+                            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, availableTabs.includes('apps') && 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, availableTabs.includes('models') && 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, availableTabs.includes('license') &&
+                            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, availableTabs.includes('skills') && 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, availableTabs.includes('rendering') &&
+                            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, availableTabs.includes('studio') && 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, availableTabs.includes('updates') &&
+                            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 })) : !canEditConfig ||
                     tab === 'models' ||
                     tab === 'updates' ||
                     tab === 'skills' ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { showLicenseFaq: tab === 'license' }))] }) }));

package/dist/components/SettingsModalFooter.js

@@ -3,17 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsModalFooter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const restart_studio_1 = require("../api/restart-studio");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const InspectorOpenInEditor_1 = require("./InspectorOpenInEditor");
 const common_1 = require("./InspectorPanel/common");
 const layout_1 = require("./layout");
+const ModalButton_1 = require("./ModalButton");
 const ModalFooter_1 = require("./ModalFooter");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const footer = {
     flex: 'none',
 };
 const footerRow = {
     alignItems: 'center',
     display: 'flex',
+    height: 28,
     justifyContent: 'space-between',
 };
 const configFileHint = {
@@ -40,6 +45,8 @@ const externalLinkIndicator = {
     width: 12,
 };
 const SettingsModalFooter = ({ showLicenseFaq }) => {
+    const { restartRequired } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const [restarting, setRestarting] = (0, react_1.useState)(false);
     const configFileLocation = (0, react_1.useMemo)(() => {
         return {
             source: 'remotion.config.ts',
@@ -50,10 +57,17 @@ const SettingsModalFooter = ({ showLicenseFaq }) => {
     const openLicenseFaq = (0, react_1.useCallback)(() => {
         window.open('https://www.remotion.dev/docs/license/faq', '_blank', 'noopener,noreferrer');
     }, []);
+    const restart = (0, react_1.useCallback)(() => {
+        setRestarting(true);
+        (0, restart_studio_1.restartStudio)().catch((error) => {
+            setRestarting(false);
+            (0, NotificationCenter_1.showNotification)(`Could not restart Studio: ${error.message}`, 4000);
+        });
+    }, []);
     return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsxs("div", { style: footerRow, children: [
-                jsx_runtime_1.jsxs("div", { style: configFileHint, children: ["Changes save to",
-                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }), showTooltips: false })
-                    ] }), showLicenseFaq ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: openLicenseFaq, style: { flex: 'none', width: 'fit-content' }, title: "Open the Remotion License FAQ in a new tab", children: ["License FAQ",
+                jsx_runtime_1.jsx("div", { style: configFileHint, children: restartRequired ? ('Restart the server to apply changes') : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["Changes save to",
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }), showTooltips: false })
+                        ] })) }), restartRequired ? (jsx_runtime_1.jsx(ModalButton_1.ModalButton, { disabled: restarting, onClick: restart, size: "compact", title: "Restart Studio to apply config file changes", children: restarting ? 'Restarting...' : 'Restart Studio' })) : showLicenseFaq ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: openLicenseFaq, style: { flex: 'none', width: 'fit-content' }, title: "Open the Remotion License FAQ in a new tab", children: ["License FAQ",
                         jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalLinkIndicator, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
                     ] })) : null] }) }));
 };

package/dist/components/SkillsSettings.d.ts

@@ -1,2 +1,7 @@
+import type { GetRemotionSkillsInfoResponse } from '@remotion/studio-shared';
 import React from 'react';
+export declare const SkillSettingsRow: React.FC<{
+    readonly isLast: boolean;
+    readonly skill: GetRemotionSkillsInfoResponse['skills'][number];
+}>;
 export declare const SkillsSettings: React.FC;

package/dist/components/SkillsSettings.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkillsSettings = void 0;
+exports.SkillsSettings = exports.SkillSettingsRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
@@ -107,9 +107,35 @@ const loading = {
     ...description,
     marginTop: 14,
 };
+const SkillSettingsRow = ({ isLast, skill }) => {
+    const { installSkill, removeSkill, skillAction } = (0, SettingsContext_1.useSettings)();
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const canInstall = !window.remotion_isReadOnlyStudio &&
+        previewServerState.type === 'connected';
+    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'
+                : null;
+    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 });
+    }, []);
+    return (jsx_runtime_1.jsxs("div", { role: "listitem", style: isLast ? lastSkillRow : skillRow, children: [
+            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: skillAction !== null, onClick: () => removeSkill(skill.name), renderAction: renderRemoveAction, variant: null })) : canInstall ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: `Install ${skill.name} in this project`, disabled: skillAction !== null, onClick: () => installSkill(skill.name), renderAction: renderInstallAction, variant: null })) : null] }));
+};
+exports.SkillSettingsRow = SkillSettingsRow;
 const SkillsSettings = () => {
     var _a;
-    const { error, remotionSkillsInfo, installSkill, removeSkill, skillAction, skillActionError, } = (0, SettingsContext_1.useSettings)();
+    const { error, remotionSkillsInfo, skillActionError } = (0, SettingsContext_1.useSettings)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const canInstall = !window.remotion_isReadOnlyStudio &&
         previewServerState.type === 'connected';
@@ -129,35 +155,12 @@ const SkillsSettings = () => {
     const renderCopyAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, color: color, style: copyIcon });
     }, [copied]);
-    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'
-                                : 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] }), 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));
+                    return (jsx_runtime_1.jsx(exports.SkillSettingsRow, { isLast: index === remotionSkillsInfo.skills.length - 1, skill: skill }, skill.name));
                 }) })) : null] }));
 };
 exports.SkillsSettings = SkillsSettings;

package/dist/components/Timeline/Timeline.js

@@ -47,7 +47,6 @@ const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
-const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const use_sync_external_store_1 = require("../../helpers/use-sync-external-store");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
@@ -62,6 +61,7 @@ const should_show_track_in_timeline_1 = require("./should-show-track-in-timeline
 const should_subscribe_to_sequence_props_1 = require("./should-subscribe-to-sequence-props");
 const SubscribeToNodePaths_1 = require("./SubscribeToNodePaths");
 const timeline_asset_drop_context_1 = require("./timeline-asset-drop-context");
+const timeline_display_groups_1 = require("./timeline-display-groups");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineHeightContainer_1 = require("./TimelineHeightContainer");
@@ -248,11 +248,11 @@ const TimelineInner = () => {
         if (videoConfigIsNull) {
             return [];
         }
-        return (0, calculate_timeline_1.calculateTimeline)({
+        return (0, timeline_display_groups_1.addTimelineDisplayGroups)((0, calculate_timeline_1.calculateTimeline)({
             sequences,
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
             compositions,
-        });
+        }));
     }, [
         sequences,
         videoConfigIsNull,
@@ -277,16 +277,15 @@ const TimelineInner = () => {
     // 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();
+        const seenDisplayGroups = new Set();
         return filtered.filter((track) => {
-            if (track.nodePathInfo === null) {
+            if (track.displayGroup === null) {
                 return true;
             }
-            const key = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey);
-            if (seenNodePaths.has(key)) {
+            if (seenDisplayGroups.has(track.displayGroup.key)) {
                 return false;
             }
-            seenNodePaths.add(key);
+            seenDisplayGroups.add(track.displayGroup.key);
             return true;
         });
     }, [filtered]);
@@ -294,7 +293,7 @@ const TimelineInner = () => {
     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)();
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     (0, react_1.useLayoutEffect)(() => {
         var _a;
         if (pendingInsertedElementSelection === null) {
@@ -342,17 +341,17 @@ const TimelineInner = () => {
         if (insertedTrack.nodePathInfo === null) {
             return;
         }
-        selectItems([{ type: 'sequence', nodePathInfo: insertedTrack.nodePathInfo }], { reveal: true });
+        currentSelection.current.selectItems([{ type: 'sequence', nodePathInfo: insertedTrack.nodePathInfo }], { reveal: true });
         (0, inserted_element_selection_1.clearInsertedElementSelection)(pendingInsertedElementSelection);
         if (pendingInsertedElementSelection.notification !== null) {
             (0, NotificationCenter_1.showNotification)(pendingInsertedElementSelection.notification, 3000);
         }
     }, [
         canvasContent,
+        currentSelection,
         fastRefreshes,
         layerChildrenValue,
         pendingInsertedElementSelection,
-        selectItems,
         timeline,
     ]);
     const maxTimelineTracks = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();