@remotion/studio 4.0.514 → 4.0.516

package/dist/components/InspectorSequenceSection.js

@@ -18,9 +18,9 @@ const transform_3d_mode_1 = require("../state/transform-3d-mode");
 const AssetFileIcon_1 = require("./AssetFileIcon");
 const InlineAction_1 = require("./InlineAction");
 const InlineCaptionInspector_1 = require("./InlineCaptionInspector");
+const CollapsibleInspectorSectionHeader_1 = require("./InspectorPanel/CollapsibleInspectorSectionHeader");
 const common_1 = require("./InspectorPanel/common");
 const inspector_section_collapse_1 = require("./InspectorPanel/inspector-section-collapse");
-const styles_1 = require("./InspectorPanel/styles");
 const asset_search_1 = require("./QuickSwitcher/asset-search");
 const border_radius_representation_1 = require("./Timeline/border-radius-representation");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
@@ -47,10 +47,6 @@ const emptyState = {
     lineHeight: 1.4,
     padding: '0 12px',
 };
-const effectsHeaderTitle = {
-    ...styles_1.sectionHeaderTitle,
-    flexShrink: 1,
-};
 const plusIcon = {
     width: 15,
     height: 15,
@@ -65,38 +61,6 @@ const transform3DToggleIcon = {
     height: 14,
     width: 14,
 };
-const collapsibleSectionHeaderButton = {
-    appearance: 'none',
-    backgroundColor: 'transparent',
-    border: 'none',
-    borderRadius: 3,
-    cursor: 'default',
-    display: 'block',
-    flex: 1,
-    fontFamily: 'Arial, Helvetica, sans-serif',
-    fontSize: 12,
-    fontWeight: 'bold',
-    lineHeight: '16px',
-    margin: 0,
-    minWidth: 0,
-    overflow: 'hidden',
-    padding: '4px 0',
-    textAlign: 'left',
-    textOverflow: 'ellipsis',
-    userSelect: 'none',
-    whiteSpace: 'nowrap',
-};
-const CollapsibleInspectorSectionHeader = ({ action, expanded, label, onToggle }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...collapsibleSectionHeaderButton,
-            color: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-        };
-    }, [hovered]);
-    return (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-            jsx_runtime_1.jsx("button", { type: "button", "aria-expanded": expanded, "aria-label": `${expanded ? 'Collapse' : 'Expand'} ${label}`, className: "__remotion-inspector-section-title", onClick: onToggle, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), style: style, children: label }), action] }));
-};
 const assetSelectorIcon = {
     flexShrink: 0,
     height: 18,
@@ -209,12 +173,12 @@ const persistInspectorSectionExpansionOverrides = (overrides) => {
         // Ignore quota errors or disabled storage.
     }
 };
-const getInspectorSectionExpansionKey = ({ nodePathInfo, groupId, }) => {
+const getInspectorSectionExpansionKey = ({ nodePathInfo, sectionId, }) => {
     return JSON.stringify([
         nodePathInfo.sequenceSubscriptionKey.absolutePath,
         nodePathInfo.sequenceSubscriptionKey.nodePath,
         nodePathInfo.index,
-        groupId,
+        sectionId,
     ]);
 };
 const getInspectorControlGroups = (rows) => {
@@ -375,7 +339,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
                 }
                 const expansionKey = getInspectorSectionExpansionKey({
                     nodePathInfo,
-                    groupId: group.id,
+                    sectionId: group.id,
                 });
                 const activity = getControlGroupActivity(group);
                 if (activity === 'active' && next[expansionKey] !== true) {
@@ -392,17 +356,17 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         });
     }, [controlGroups, getControlGroupActivity, nodePathInfo]);
     const isControlGroupExpanded = (0, react_1.useCallback)((group) => {
-        if (!(0, inspector_section_collapse_1.isSmartCollapsibleInspectorGroup)(group.id)) {
-            return true;
-        }
         const expansionKey = getInspectorSectionExpansionKey({
             nodePathInfo,
-            groupId: group.id,
+            sectionId: group.id,
         });
         const override = sectionExpansionOverrides[expansionKey];
         if (override !== undefined) {
             return override;
         }
+        if (!(0, inspector_section_collapse_1.isSmartCollapsibleInspectorGroup)(group.id)) {
+            return true;
+        }
         const automaticExpansion = automaticSectionExpansion[expansionKey];
         if (automaticExpansion !== undefined) {
             return automaticExpansion;
@@ -417,7 +381,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
     const toggleControlGroup = (0, react_1.useCallback)((group) => {
         const expansionKey = getInspectorSectionExpansionKey({
             nodePathInfo,
-            groupId: group.id,
+            sectionId: group.id,
         });
         const nextExpanded = !isControlGroupExpanded(group);
         setSectionExpansionOverrides((previous) => {
@@ -426,6 +390,28 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             return next;
         });
     }, [isControlGroupExpanded, nodePathInfo]);
+    const isAdditionalSectionExpanded = (0, react_1.useCallback)((sectionId) => {
+        var _a;
+        const expansionKey = getInspectorSectionExpansionKey({
+            nodePathInfo,
+            sectionId,
+        });
+        return (_a = sectionExpansionOverrides[expansionKey]) !== null && _a !== void 0 ? _a : true;
+    }, [nodePathInfo, sectionExpansionOverrides]);
+    const toggleAdditionalSection = (0, react_1.useCallback)((sectionId) => {
+        const expansionKey = getInspectorSectionExpansionKey({
+            nodePathInfo,
+            sectionId,
+        });
+        const nextExpanded = !isAdditionalSectionExpanded(sectionId);
+        setSectionExpansionOverrides((previous) => {
+            const next = { ...previous, [expansionKey]: nextExpanded };
+            persistInspectorSectionExpansionOverrides(next);
+            return next;
+        });
+    }, [isAdditionalSectionExpanded, nodePathInfo]);
+    const captionsExpanded = isAdditionalSectionExpanded('captions');
+    const effectsExpanded = isAdditionalSectionExpanded('effects');
     const visibleControlRows = controlGroups.flatMap((group) => {
         return isControlGroupExpanded(group) ? group.rows : [];
     });
@@ -509,26 +495,26 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             : show3DTransformControls
                 ? 'Hide 3D transform controls'
                 : 'Show 3D transform controls', hoveredColor: show3DTransformControls ? colors_1.BLUE : undefined, unhoveredColor: show3DTransformControls ? colors_1.BLUE : colors_1.LIGHT_TEXT, renderAction: (color) => (jsx_runtime_1.jsx(cube_1.CubeIcon, { color: color, style: transform3DToggleIcon })) }));
-    const effectsHeader = (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-            jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
+    const effectsHeader = (jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) }), expanded: effectsExpanded, label: "Effects", onToggle: () => toggleAdditionalSection('effects') }));
     const renderRow = ({ node, depth }) => {
         return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
     };
     const renderControlGroupHeader = (group) => {
-        const collapsible = (0, inspector_section_collapse_1.isSmartCollapsibleInspectorGroup)(group.id);
         const expanded = isControlGroupExpanded(group);
-        if (collapsible) {
-            return (jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader, { action: group.id === 'border-radius' && expanded ? borderRadiusAction : null, expanded: expanded, label: group.label, onToggle: () => toggleControlGroup(group) }));
-        }
-        return (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-                jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: group.label }), group.id === 'transforms' ? transform3DAction : null] }));
+        return (jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: expanded
+                ? group.id === 'border-radius'
+                    ? borderRadiusAction
+                    : group.id === 'transforms'
+                        ? transform3DAction
+                        : null
+                : null, expanded: expanded, label: group.label, onToggle: () => toggleControlGroup(group) }));
     };
     if (controlRows.length === 0 &&
         !showEffectsSection &&
         inlineCaptions === null) {
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Controls", children: jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" }) }) }));
     }
-    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(group), children: isControlGroupExpanded(group) ? (group.id === 'transforms' ? (jsx_runtime_1.jsxs(Transform3DModeContext_1.Transform3DModeContext.Provider, { value: show3DTransformControls, children: [renderTransformControls(), group.rows.map(renderRow)] })) : (group.rows.map(renderRow))) : null }, group.id))) })) : null, inlineCaptions ? (jsx_runtime_1.jsx(InlineCaptionInspector_1.InlineCaptionInspector, { captions: inlineCaptions, controls: sequence.controls, nodePath: nodePathInfo.sequenceSubscriptionKey, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(layoutGroup), children: isControlGroupExpanded(layoutGroup)
+    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(group), children: isControlGroupExpanded(group) ? (group.id === 'transforms' ? (jsx_runtime_1.jsxs(Transform3DModeContext_1.Transform3DModeContext.Provider, { value: show3DTransformControls, children: [renderTransformControls(), group.rows.map(renderRow)] })) : (group.rows.map(renderRow))) : null }, group.id))) })) : null, inlineCaptions ? (jsx_runtime_1.jsx(InlineCaptionInspector_1.InlineCaptionInspector, { captions: inlineCaptions, controls: sequence.controls, expanded: captionsExpanded, nodePath: nodePathInfo.sequenceSubscriptionKey, onToggle: () => toggleAdditionalSection('captions'), readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectsExpanded && effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(layoutGroup), children: isControlGroupExpanded(layoutGroup)
                             ? layoutGroup.rows.map(renderRow)
                             : null }) })) : null] }) }));
 };

package/dist/components/InstallPackage.d.ts

@@ -1,5 +1,6 @@
 import type { PackageManager } from '@remotion/studio-shared';
 import React from 'react';
-export declare const InstallPackageModal: React.FC<{
-    readonly packageManager: PackageManager;
+export declare const InstallPackageSettings: React.FC<{
+    readonly footerContainer: HTMLElement | null;
+    readonly packageManager: PackageManager | null;
 }>;

package/dist/components/InstallPackage.js

@@ -32,11 +32,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InstallPackageModal = void 0;
+exports.InstallPackageSettings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
 const remotion_1 = require("remotion");
 const install_package_1 = require("../api/install-package");
 const restart_studio_1 = require("../api/restart-studio");
@@ -44,42 +48,90 @@ const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint")
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const modals_1 = require("../state/modals");
 const Checkbox_1 = require("./Checkbox");
 const InstallablePackage_1 = require("./InstallablePackage");
 const layout_1 = require("./layout");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const ModalButton_1 = require("./ModalButton");
 const ModalFooter_1 = require("./ModalFooter");
-const ModalHeader_1 = require("./ModalHeader");
-const DismissableModal_1 = require("./NewComposition/DismissableModal");
 const container = {
-    padding: 20,
-    maxHeight: 400,
+    boxSizing: 'border-box',
+    flex: 1,
+    fontFamily: 'sans-serif',
+    minHeight: 0,
     overflowY: 'auto',
+    padding: '16px 16px 0',
+};
+const settingsContainer = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    minHeight: 0,
+    minWidth: 0,
 };
 const text = {
     fontSize: 14,
 };
-const InstallPackageModal = ({ packageManager }) => {
+const footer = {
+    flex: 'none',
+};
+const packageRow = {
+    alignItems: 'center',
+    borderBottom: colors_1.BORDER_WHITE_ALPHA_12,
+    display: 'flex',
+    gap: 10,
+    minHeight: 52,
+    padding: '4px 0',
+};
+const lastPackageRow = {
+    ...packageRow,
+    borderBottom: 'none',
+};
+const InstallPackageSettings = ({ footerContainer, packageManager }) => {
     const [state, setState] = react_1.default.useState({ type: 'idle' });
     const [map, setMap] = react_1.default.useState({});
     const { previewServerState: ctx } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const selectedPackages = Object.keys(map).filter((pkg) => map[pkg]);
+    const selectedPackageSpecs = selectedPackages.map((name) => {
+        var _a;
+        var _b;
+        return ({
+            name,
+            version: (_b = (_a = studio_shared_1.extraPackages.find((pkg) => pkg.name === name)) === null || _a === void 0 ? void 0 : _a.version) !== null && _b !== void 0 ? _b : null,
+        });
+    });
     const onClick = (0, react_1.useCallback)(async () => {
+        var _a;
         if (state.type === 'done') {
+            if (packageManager === null) {
+                setSelectedModal(null);
+                return;
+            }
             setState({ type: 'restarting' });
             (0, restart_studio_1.restartStudio)();
             return;
         }
         setState({ type: 'installing' });
         try {
-            await (0, install_package_1.installPackages)(selectedPackages.map((name) => ({ name, version: null })));
+            await (0, install_package_1.installPackages)(selectedPackageSpecs);
+            window.remotion_installedPackages = Array.from(new Set([
+                ...((_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : []),
+                ...selectedPackages,
+            ]));
             setState({ type: 'done' });
         }
         catch (err) {
             setState({ type: 'error', error: err });
         }
-    }, [selectedPackages, state.type]);
+    }, [
+        packageManager,
+        selectedPackageSpecs,
+        selectedPackages,
+        setSelectedModal,
+        state.type,
+    ]);
     const canSelectPackages = state.type === 'idle' && ctx.type === 'connected';
     const disabled = !(canSelectPackages || state.type === 'done') ||
         selectedPackages.length === 0;
@@ -103,10 +155,14 @@ const InstallPackageModal = ({ packageManager }) => {
             enter.unregister();
         };
     }, [disabled, onClick, registerKeybinding]);
-    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Install packages" }), jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: state.type === 'done' ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Installed package", selectedPackages.length === 1 ? '' : 's', ' ', "successfully. Restart the server to complete."] })) : state.type === 'restarting' ? (jsx_runtime_1.jsx("div", { style: text, children: "Restarting the Studio server..." })) : state.type === 'installing' ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Installing package", selectedPackages.length === 1 ? '' : 's', ". Check your terminal for progress."] })) : (jsx_runtime_1.jsxs("div", { style: text, children: [Object.entries(studio_shared_1.installableMap)
-                            .filter(([, install]) => install)
-                            .map(([pkgShort]) => {
+    const installablePackages = Object.entries(studio_shared_1.installableMap).filter(([, install]) => install);
+    const packageCount = installablePackages.length + studio_shared_1.extraPackages.length;
+    return (jsx_runtime_1.jsxs("div", { style: settingsContainer, children: [
+            jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: state.type === 'done' ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Installed package", selectedPackages.length === 1 ? '' : 's', ' ', "successfully.", packageManager === null
+                            ? null
+                            : ' Restart the server to complete.'] })) : state.type === 'restarting' ? (jsx_runtime_1.jsx("div", { style: text, children: "Restarting the Studio server..." })) : state.type === 'installing' ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Installing package", selectedPackages.length === 1 ? '' : 's', packageManager === null
+                            ? '.'
+                            : '. Check your terminal for progress.'] })) : (jsx_runtime_1.jsxs("div", { style: text, role: "list", "aria-label": "Remotion packages", children: [installablePackages.map(([pkgShort], index) => {
                             var _a;
                             var _b;
                             const pkg = pkgShort === 'core' ? 'remotion' : `@remotion/${pkgShort}`;
@@ -119,32 +175,38 @@ const InstallPackageModal = ({ packageManager }) => {
                             if (!description) {
                                 throw new Error('No description for ' + pkg);
                             }
-                            return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                            return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", role: "listitem", style: index === packageCount - 1 ? lastPackageRow : packageRow, children: [
                                     jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: map[pkg], name: pkg, onChange: () => {
                                             setMap((prev) => ({ ...prev, [pkg]: !prev[pkg] }));
-                                        }, disabled: !canSelectPackages || isInstalled }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 }), jsx_runtime_1.jsx(InstallablePackage_1.InstallablePackageComp, { description: description, isInstalled: isInstalled, link: link, pkg: pkg })
+                                        }, disabled: !canSelectPackages || isInstalled }), jsx_runtime_1.jsx(InstallablePackage_1.InstallablePackageComp, { description: description, isInstalled: isInstalled, link: link, pkg: pkg })
                                 ] }, pkg));
-                        }), studio_shared_1.extraPackages.map((extraPkg) => {
+                        }), studio_shared_1.extraPackages.map((extraPkg, index) => {
                             var _a;
                             var _b;
                             const isInstalled = (_b = (_a = window.remotion_installedPackages) === null || _a === void 0 ? void 0 : _a.includes(extraPkg.name)) !== null && _b !== void 0 ? _b : false;
-                            return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                            return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", role: "listitem", style: installablePackages.length + index === packageCount - 1
+                                    ? lastPackageRow
+                                    : packageRow, children: [
                                     jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: map[extraPkg.name], name: extraPkg.name, onChange: () => {
                                             setMap((prev) => ({
                                                 ...prev,
                                                 [extraPkg.name]: !prev[extraPkg.name],
                                             }));
-                                        }, disabled: !canSelectPackages || isInstalled }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 }), jsx_runtime_1.jsx(InstallablePackage_1.InstallablePackageComp, { description: extraPkg.description, isInstalled: isInstalled, link: extraPkg.docsUrl, pkg: `${extraPkg.name}@${extraPkg.version}` })
+                                        }, disabled: !canSelectPackages || isInstalled }), jsx_runtime_1.jsx(InstallablePackage_1.InstallablePackageComp, { description: extraPkg.description, isInstalled: isInstalled, link: extraPkg.docsUrl, pkg: `${extraPkg.name}@${extraPkg.version}` })
                                 ] }, extraPkg.name));
-                        })] })) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [state.type === 'idle' ? (jsx_runtime_1.jsxs("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 }, children: ["This will install ", selectedPackages.length, " package", selectedPackages.length === 1 ? '' : 's', jsx_runtime_1.jsx("br", {}),
-                                "using ", packageManager, ", Remotion v", remotion_1.VERSION] })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onClick, disabled: disabled, children: [state.type === 'restarting'
-                                    ? 'Restarting...'
-                                    : state.type === 'installing'
-                                        ? 'Installing...'
-                                        : state.type === 'done'
-                                            ? 'Restart Server'
-                                            : 'Install', disabled ? null : jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })
-                    ] }) })
-        ] }));
+                        })] })) }), footerContainer
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [state.type === 'idle' ? (jsx_runtime_1.jsxs("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 }, children: ["This will install ", selectedPackages.length, " package", selectedPackages.length === 1 ? '' : 's', jsx_runtime_1.jsx("br", {}), packageManager === null
+                                        ? `in this project, Remotion v${remotion_1.VERSION}`
+                                        : `using ${packageManager}, Remotion v${remotion_1.VERSION}`] })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onClick, disabled: disabled, children: [state.type === 'restarting'
+                                        ? 'Restarting...'
+                                        : state.type === 'installing'
+                                            ? 'Installing...'
+                                            : state.type === 'done'
+                                                ? packageManager === null
+                                                    ? 'Done'
+                                                    : 'Restart Server'
+                                                : 'Install', disabled ? null : jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })
+                        ] }) }), footerContainer)
+                : null] }));
 };
-exports.InstallPackageModal = InstallPackageModal;
+exports.InstallPackageSettings = InstallPackageSettings;

package/dist/components/InstallablePackage.js

@@ -4,18 +4,44 @@ exports.InstallablePackageComp = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
 const FONT_SIZE = 13;
+const container = {
+    alignItems: 'center',
+    display: 'flex',
+    flex: 1,
+    gap: 10,
+    minWidth: 0,
+};
+const packageDetails = {
+    flex: 1,
+    minWidth: 0,
+};
+const packageName = {
+    color: colors_1.WHITE,
+    display: 'block',
+    fontFamily: 'monospace',
+    fontSize: FONT_SIZE,
+    lineHeight: 1.4,
+    overflow: 'hidden',
+    textDecoration: 'none',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const descriptionStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: FONT_SIZE,
+    lineHeight: 1.4,
+};
+const status = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 12,
+    lineHeight: 1.4,
+    whiteSpace: 'nowrap',
+};
 const InstallablePackageComp = ({ isInstalled, pkg, link, description }) => {
-    return (jsx_runtime_1.jsxs("div", { style: {
-            fontSize: FONT_SIZE,
-            lineHeight: 1.2,
-            paddingBottom: 4,
-            paddingTop: 4,
-        }, children: [
-            jsx_runtime_1.jsx("a", { href: link, style: {
-                    fontSize: FONT_SIZE,
-                    color: colors_1.WHITE_HEX,
-                    textDecoration: 'none',
-                }, target: "_blank", children: pkg }), ' ', isInstalled ? (jsx_runtime_1.jsx("span", { style: { opacity: 0.3, fontSize: 'inherit' }, children: "(installed)" })) : null, jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: FONT_SIZE }, children: description })
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsxs("div", { style: packageDetails, children: [
+                    jsx_runtime_1.jsx("a", { href: link, style: packageName, target: "_blank", children: pkg }), jsx_runtime_1.jsx("div", { style: descriptionStyle, children: description })
+                ] }), jsx_runtime_1.jsx("span", { style: status, children: isInstalled ? 'Installed' : 'Not installed' })
         ] }));
 };
 exports.InstallablePackageComp = InstallablePackageComp;

package/dist/components/KeyboardShortcutsSettings.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const KeyboardShortcutsSettings: React.FC;

package/dist/components/KeyboardShortcutsSettings.js

@@ -0,0 +1,177 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardShortcutsSettings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const colors_1 = require("../helpers/colors");
+const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
+const ConfigSelect_1 = require("./ConfigSelect");
+const styles_1 = require("./InspectorPanel/styles");
+const keyboard_shortcuts_1 = require("./keyboard-shortcuts");
+const layout_1 = require("./layout");
+const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+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',
+    minWidth: 0,
+};
+const dividerLabel = {
+    ...styles_1.sectionHeader,
+    margin: 0,
+    padding: '4px 16px',
+};
+const shortcutSectionTitle = {
+    ...dividerLabel,
+    marginTop: 8,
+};
+const shortcutRow = {
+    alignItems: 'center',
+    borderBottom: colors_1.BORDER_WHITE_ALPHA_12,
+    display: 'flex',
+    gap: 16,
+    justifyContent: 'space-between',
+    margin: '0 16px',
+    minHeight: 38,
+};
+const lastShortcutRow = {
+    ...shortcutRow,
+    borderBottom: 'none',
+};
+const actionName = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 14,
+    lineHeight: 1.4,
+    minWidth: 0,
+};
+const chords = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    gap: 6,
+};
+const chord = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 4,
+};
+const key = {
+    background: colors_1.INPUT_BACKGROUND,
+    border: `1px solid ${colors_1.BLACK_ALPHA_60}`,
+    borderBottomWidth: 2,
+    borderRadius: 3,
+    color: colors_1.WHITE,
+    fontFamily: 'monospace',
+    fontSize: 12,
+    lineHeight: '18px',
+    minWidth: 18,
+    padding: '1px 5px',
+    textAlign: 'center',
+};
+const alternative = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 11,
+};
+const KeyboardShortcutsSettings = () => {
+    var _a;
+    const { error: settingsError, revision, studioRuntimeConfig } = (0, SettingsContext_1.useSettings)();
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const [enabled, setEnabled] = (0, react_1.useState)(null);
+    const [edited, setEdited] = (0, react_1.useState)(false);
+    const [syncedRevision, setSyncedRevision] = (0, react_1.useState)(-1);
+    const [error, setError] = (0, react_1.useState)(null);
+    const displayedShortcutGroups = (0, studio_runtime_config_1.getStudioAskAIEnabled)()
+        ? [...keyboard_shortcuts_1.keyboardShortcutGroups, keyboard_shortcuts_1.askAIKeyboardShortcutGroup]
+        : keyboard_shortcuts_1.keyboardShortcutGroups;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        var _b;
+        if (studioRuntimeConfig === null) {
+            return;
+        }
+        setEnabled((_b = (_a = studioRuntimeConfig.configFileStudioSettings) === null || _a === void 0 ? void 0 : _a.keyboardShortcutsEnabled) !== null && _b !== void 0 ? _b : null);
+        setEdited(false);
+        setSyncedRevision(revision);
+        setError(null);
+    }, [revision, studioRuntimeConfig]);
+    const onEnabledChange = (0, react_1.useCallback)((value) => {
+        setEnabled(value);
+        setEdited(true);
+    }, []);
+    const updates = (0, react_1.useMemo)(() => {
+        if (!edited) {
+            return [];
+        }
+        return enabled === null
+            ? [{ setter: 'setKeyboardShortcutsEnabled', type: 'delete' }]
+            : [
+                {
+                    setter: 'setKeyboardShortcutsEnabled',
+                    type: 'set',
+                    value: enabled,
+                },
+            ];
+    }, [edited, enabled]);
+    const ready = studioRuntimeConfig !== null && syncedRevision === revision;
+    (0, use_auto_save_config_1.useAutoSaveConfig)({
+        enabled: ready && !isBrowserStudio,
+        onError: setError,
+        ready,
+        syncRevision: syncedRevision,
+        updates,
+    });
+    if (studioRuntimeConfig === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [isBrowserStudio ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("p", { style: dividerLabel, children: "General" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Enabled", name: "Keyboard shortcuts", onChange: onEnabledChange, options: ConfigSelect_1.booleanOptions, value: enabled })
+                ] })), displayedShortcutGroups.map((group, groupIndex) => (jsx_runtime_1.jsxs("div", { children: [
+                    jsx_runtime_1.jsx("p", { style: shortcutSectionTitle, children: group.name }), jsx_runtime_1.jsx("div", { role: "list", "aria-label": group.name, children: group.shortcuts.map((shortcut, shortcutIndex) => (jsx_runtime_1.jsxs("div", { role: "listitem", style: groupIndex === displayedShortcutGroups.length - 1 &&
+                                shortcutIndex === group.shortcuts.length - 1
+                                ? lastShortcutRow
+                                : shortcutRow, children: [
+                                jsx_runtime_1.jsx("span", { style: actionName, children: shortcut.action }), jsx_runtime_1.jsx("span", { style: chords, children: shortcut.chords.map((keys, chordIndex) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [chordIndex > 0 ? (jsx_runtime_1.jsx("span", { style: alternative, children: "or" })) : null, jsx_runtime_1.jsx("span", { style: chord, children: keys.map((keyboardKey) => (jsx_runtime_1.jsx("kbd", { style: key, children: keyboardKey }, keyboardKey))) })
+                                        ] }, keys.join('-')))) })
+                            ] }, shortcut.action))) })
+                ] }, group.name))), (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] }));
+};
+exports.KeyboardShortcutsSettings = KeyboardShortcutsSettings;

package/dist/components/Menu/MenuDivider.js

@@ -10,6 +10,6 @@ const menuDivider = {
     backgroundColor: colors_1.WHITE_ALPHA_05,
 };
 const MenuDivider = () => {
-    return jsx_runtime_1.jsx("div", { style: menuDivider });
+    return jsx_runtime_1.jsx("div", { role: "separator", style: menuDivider });
 };
 exports.MenuDivider = MenuDivider;

package/dist/components/MenuBuildIndicator.js

@@ -48,7 +48,7 @@ const MenuBuildIndicator = ({ mobileLayout }) => {
         };
     }, []);
     return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [
-            jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation, locationType: "folder" }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation, locationType: "folder" }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })
                 ] })) : null) : isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner }))] }));
 };