@remotion/studio 4.0.515 → 4.0.517

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/MenuItem.js

@@ -12,20 +12,29 @@ const colors_1 = require("../../helpers/colors");
 const hoverable_1 = require("../../helpers/hoverable");
 const pointer_session_1 = require("../../helpers/pointer-session");
 const z_index_1 = require("../../state/z-index");
+const menu_toolbar_height_1 = require("../menu-toolbar-height");
 const MenuContent_1 = require("../NewComposition/MenuContent");
 const is_menu_item_1 = require("./is-menu-item");
 const portals_1 = require("./portals");
 const styles_1 = require("./styles");
+const MENU_ITEM_HEIGHT = 24;
+const MENU_ITEM_VERTICAL_MARGIN = (menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT - MENU_ITEM_HEIGHT) / 2;
 const container = {
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
     fontSize: 13,
-    paddingLeft: 10,
-    paddingRight: 10,
+    height: MENU_ITEM_HEIGHT,
+    justifyContent: 'center',
+    paddingLeft: 8,
+    paddingRight: 8,
     cursor: 'default',
-    paddingTop: 6,
-    paddingBottom: 6,
+    paddingTop: 0,
+    paddingBottom: 0,
     userSelect: 'none',
     WebkitUserSelect: 'none',
     border: 'none',
+    borderRadius: 3,
 };
 const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered, onItemQuit, onPreviousMenu, onNextMenu, menu, }) => {
     const ref = (0, react_1.useRef)(null);
@@ -58,7 +67,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
         return {
             ...styles_1.menuContainerTowardsBottom,
             left: size.left,
-            top: size.top + size.height,
+            top: size.top + size.height + MENU_ITEM_VERTICAL_MARGIN,
         };
     }, [selected, size]);
     // Not for styling (which is done via CSS :hover), but for switching
@@ -105,7 +114,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
         var _a, _b;
         return {
             ...styles_1.outerPortal,
-            top: ((_a = size === null || size === void 0 ? void 0 : size.top) !== null && _a !== void 0 ? _a : 0) + ((_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : 0),
+            top: ((_a = size === null || size === void 0 ? void 0 : size.top) !== null && _a !== void 0 ? _a : 0) + ((_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : 0) + MENU_ITEM_VERTICAL_MARGIN,
         };
     }, [size]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

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 }))] }));
 };

package/dist/components/MenuToolbar.js

@@ -36,6 +36,10 @@ const row = {
 const flex = {
     flex: 1,
 };
+const menuItems = {
+    display: 'inline-flex',
+    height: 24,
+};
 const MenuToolbar = ({ readOnlyStudio }) => {
     const [selected, setSelected] = (0, react_1.useState)(null);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -126,9 +130,9 @@ const MenuToolbar = ({ readOnlyStudio }) => {
         ? 'Quick Switcher'
         : `Quick Switcher (${ShortcutHint_1.cmdOrCtrlCharacter}+K)`;
     return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", className: "css-reset", style: row, onPointerDown: onPointerDown, children: [
-            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [mobileLayout ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openQuickSwitcher, renderAction: renderSearchIcon, title: searchTooltip })) : (jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" })), structure.map((s) => {
-                        return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
-                    }), readOnlyStudio || browserStudioOperations ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), mobileLayout ? null : jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, { mobileLayout: mobileLayout }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
+            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [mobileLayout ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openQuickSwitcher, renderAction: renderSearchIcon, title: searchTooltip })) : (jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" })), jsx_runtime_1.jsx("div", { style: menuItems, children: structure.map((s) => {
+                            return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
+                        }) }), readOnlyStudio || browserStudioOperations ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), mobileLayout ? null : jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, { mobileLayout: mobileLayout }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
                 ] })
         ] }));
 };

package/dist/components/Modals.js

@@ -13,8 +13,8 @@ const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const EffectPickerModal_1 = require("./EffectPickerModal");
+const ElementLibraryModal_1 = require("./ElementLibraryModal");
 const FixComputedValueModal_1 = require("./FixComputedValueModal");
-const InstallPackage_1 = require("./InstallPackage");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
@@ -53,10 +53,12 @@ const Modals = ({ readOnlyStudio }) => {
             });
         });
     }, [isBrowserStudio, setSelectedModal, subscribeToEvent]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack, canvasCapture: modalContextType.canvasCapture })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), !isBrowserStudio &&
-                modalContextType &&
-                modalContextType.type === 'settings' && (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack, canvasCapture: modalContextType.canvasCapture })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType &&
+                modalContextType.type === 'settings' &&
+                (!isBrowserStudio ||
+                    modalContextType.initialTab === 'packages' ||
+                    modalContextType.initialTab === 'shortcuts') ? (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)) : null, modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/NewComposition/CodemodFooter.d.ts

@@ -9,7 +9,6 @@ export declare const CodemodFooter: React.FC<{
     readonly codemod: RecastCodemod;
     readonly stack: string | null;
     readonly loadingNotification: React.ReactNode | null;
-    readonly successNotification: React.ReactNode;
     readonly errorNotification: string;
     readonly genericSubmitLabel: string;
     readonly submitLabel: (options: {

package/dist/components/NewComposition/CodemodFooter.js

@@ -21,7 +21,7 @@ const CodemodFooterPresentation = ({ codemodStatus, disabled, genericSubmitLabel
                 ] })
         ] }));
 };
-const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, fallbackToRootFile = false, applyCodemod, applyCodemodForPreview, }) => {
+const CodemodFooter = ({ codemod, stack, valid, loadingNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, fallbackToRootFile = false, applyCodemod, applyCodemodForPreview, }) => {
     var _a;
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
@@ -52,12 +52,7 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
                 }
                 return;
             }
-            if (notification) {
-                notification.replaceContent(successNotification, 2000);
-            }
-            else {
-                (0, NotificationCenter_1.showNotification)(successNotification, 2000);
-            }
+            notification === null || notification === void 0 ? void 0 : notification.dismiss();
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
         })
             .catch((err) => {
@@ -75,7 +70,6 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
         loadingNotification,
         onSuccess,
         setSelectedModal,
-        successNotification,
         symbolicatedStack,
     ]);
     const getCanApplyCodemod = (0, react_1.useCallback)(async (signal) => {

package/dist/components/NewComposition/DeleteComposition.js

@@ -39,7 +39,7 @@ const DeleteCompositionLoaded = ({ compositionId }) => {
                             jsx_runtime_1.jsx("br", {}),
                             "The associated ",
                             jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "component" }),
-                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', successNotification: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: true, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: true, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
                                 codemod,
                                 dryRun: false,
                                 signal,

package/dist/components/NewComposition/DeleteFolder.js

@@ -33,7 +33,7 @@ const DeleteFolder = ({ folderName, parentName, stack }) => {
                     jsx_runtime_1.jsxs("div", { style: content, children: ["Do you want to delete the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "Folder" }),
                             " with ID ", '"', folderId, '"', "?",
                             jsx_runtime_1.jsx("br", {}),
-                            "The compositions and nested folders inside it will stay in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete folder`, loadingNotification: 'Deleting folder', successNotification: `Deleted folder ${folderId}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: stack, valid: true, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                            "The compositions and nested folders inside it will stay in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete folder`, loadingNotification: 'Deleting folder', genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: stack, valid: true, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
                                 codemod,
                                 dryRun: false,
                                 signal,

package/dist/components/NewComposition/DuplicateComposition.js

@@ -203,7 +203,7 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
                                         ] })
                                 ] })) : null, type === 'composition' && hadDurationDefined ? (jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames })) : null, type === 'composition' && hadFpsDefined ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
-                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', successNotification: `Duplicated ${unresolved.id} as ${newId}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: onDuplicateSuccess, applyCodemod: ({ signal, symbolicatedStack }) => (0, duplicate_composition_api_1.duplicateComposition)({
+                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: onDuplicateSuccess, applyCodemod: ({ signal, symbolicatedStack }) => (0, duplicate_composition_api_1.duplicateComposition)({
                                 codemod,
                                 dryRun: false,
                                 signal,

package/dist/components/NewComposition/InputDragger.js

@@ -53,6 +53,15 @@ exports.inputDraggerContainerStyle = {
     outline: 'none',
     padding: '4px 6px',
 };
+const compactInputDraggerStyle = {
+    fontSize: 12,
+    lineHeight: '16px',
+    padding: '0 6px',
+};
+const compactInputDraggerContainerStyle = {
+    ...exports.inputDraggerContainerStyle,
+    ...compactInputDraggerStyle,
+};
 const isInt = (num) => {
     return num % 1 === 0;
 };
@@ -295,7 +304,7 @@ const deriveInputDraggerValueDiff = ({ dragSensitivity, step, xDistance, }) => {
     return (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step * dragSensitivity, 0, 0, 0, step * dragSensitivity]);
 };
 exports.deriveInputDraggerValueDiff = deriveInputDraggerValueDiff;
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), formatterStyle, formatterSubtitle, formatterSubtitleStyle, buttonStyle, status, rightAlign, small, allowStepMismatch = false, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), formatterStyle, formatterSubtitle, formatterSubtitleStyle, buttonStyle, style: inputStyle, status, rightAlign, small, allowStepMismatch = false, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
@@ -314,6 +323,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         userSelect: 'none',
         WebkitUserSelect: 'none',
         fontSize: small ? 12 : 14,
+        lineHeight: small ? '16px' : undefined,
         fontVariantNumeric: 'tabular-nums',
         ...formatterStyle,
     }), [dragging, formatterStyle, small]);
@@ -484,11 +494,24 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         }
     }, [inputFallback]);
     if (inputFallback) {
-        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyDown: onInputKeyDown, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: validationStep, defaultValue: value, status: status, rightAlign: rightAlign, small: small, ...props, type: "text" }) }));
+        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyDown: onInputKeyDown, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: validationStep, defaultValue: value, status: status, rightAlign: rightAlign, small: small, ...props, style: small
+                    ? {
+                        ...compactInputDraggerStyle,
+                        display: 'block',
+                        ...inputStyle,
+                    }
+                    : inputStyle, type: "text" }) }));
     }
     return (jsx_runtime_1.jsxs("button", { ref: ref, type: "button", "aria-label": props['aria-label'], className: '__remotion_input_dragger', style: buttonStyle
-            ? { ...exports.inputDraggerContainerStyle, ...buttonStyle }
-            : exports.inputDraggerContainerStyle, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: [
+            ? {
+                ...(small
+                    ? compactInputDraggerContainerStyle
+                    : exports.inputDraggerContainerStyle),
+                ...buttonStyle,
+            }
+            : small
+                ? compactInputDraggerContainerStyle
+                : exports.inputDraggerContainerStyle, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: [
             jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }), formatterSubtitle ? (jsx_runtime_1.jsx("span", { style: formatterSubtitleStyle, children: formatterSubtitle(value) })) : null] }));
 };
 exports.InputDragger = react_1.default.forwardRef(InputDraggerForwardRefFn);

package/dist/components/NewComposition/NewComposition.js

@@ -157,7 +157,7 @@ const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack })
                                 ] }), jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
                                 ] })
-                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createCanvasCaptureComposition({
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createCanvasCaptureComposition({
                                 signal,
                                 symbolicatedStack,
                             }), applyCodemodForPreview: null, fallbackToRootFile: true }) })

package/dist/components/NewComposition/NewFolder.js

@@ -4,7 +4,6 @@ exports.NewFolder = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const get_folder_id_1 = require("../../helpers/get-folder-id");
 const validate_new_folder_name_1 = require("../../helpers/validate-new-folder-name");
 const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
@@ -63,7 +62,6 @@ const NewFolder = ({ parentName, stack }) => {
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
-    const folderId = (0, get_folder_id_1.getFolderId)({ folderName: newName, parentName });
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "New folder" }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsxs("div", { style: content, children: [parentName ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
@@ -74,7 +72,7 @@ const NewFolder = ({ parentName, stack }) => {
                                                         jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: folderNameErrMessage, type: "error" })
                                                     ] })) : null] }) })
                                 ] })
-                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Creating folder...', errorNotification: 'Could not create folder', successNotification: `Created folder ${folderId}`, genericSubmitLabel: 'Add to root file', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, fallbackToRootFile: true, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Creating folder...', errorNotification: 'Could not create folder', genericSubmitLabel: 'Add to root file', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, fallbackToRootFile: true, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
                                 codemod,
                                 dryRun: false,
                                 signal,

package/dist/components/NewComposition/RenameComposition.js

@@ -59,7 +59,7 @@ const RenameCompositionLoaded = () => {
                                             jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
-                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', successNotification: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => renameComposition({
+                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => renameComposition({
                                 newCompositionId: newId,
                                 signal,
                                 symbolicatedStack,

package/dist/components/NewComposition/RenameFolder.js

@@ -62,7 +62,7 @@ const RenameFolder = ({ folderName, parentName, stack }) => {
                                             jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Folder name", status: "ok", rightAlign: true }), folderNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: folderNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
-                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming folder...', errorNotification: 'Could not rename folder', successNotification: `Renamed folder to ${newName}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming folder...', errorNotification: 'Could not rename folder', genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
                                 codemod,
                                 dryRun: false,
                                 signal,

package/dist/components/NewComposition/use-rename-static-file.js

@@ -78,7 +78,7 @@ const useRenameStaticFile = ({ relativePath, staticFiles, }) => {
                 setCanvasContent({ type: 'asset', asset: newRelativePath });
                 (0, url_state_1.replaceUrl)(`/assets/${newRelativePath}`);
             }
-            notification.replaceContent(`Renamed to ${newRelativePath}`, 2000);
+            notification.dismiss();
             return true;
         }
         catch (err) {

package/dist/components/Notifications/NotificationCenter.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 type CreatedNotification = {
+    dismiss: () => void;
     replaceContent: (newContent: React.ReactNode, durationInMs: number | null) => void;
 };
 export declare const showNotification: (content: React.ReactNode, durationInMs: number | null) => CreatedNotification;

package/dist/components/Notifications/NotificationCenter.js

@@ -45,6 +45,11 @@ const NotificationCenter = () => {
             return [...previousNotifications, notification];
         });
         return {
+            dismiss: () => {
+                setNotifications((oldNotifications) => {
+                    return oldNotifications.filter((notificationToFilter) => notificationToFilter.id !== notification.id);
+                });
+            },
             replaceContent: (newContent, durationInMs) => {
                 setNotifications((oldNotifications) => {
                     return oldNotifications.map((notificationToMap) => {

package/dist/components/OptionsPanel.js

@@ -12,6 +12,7 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const options_sidebar_tabs_1 = require("./options-sidebar-tabs");
 const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
 const extract_enum_json_paths_1 = require("./RenderModal/SchemaEditor/extract-enum-json-paths");
+const infer_zod_schema_from_value_1 = require("./RenderModal/SchemaEditor/infer-zod-schema-from-value");
 const SchemaResetButton_1 = require("./RenderModal/SchemaEditor/SchemaResetButton");
 const RenderQueue_1 = require("./RenderQueue");
 const actions_1 = require("./RenderQueue/actions");
@@ -80,21 +81,17 @@ const OptionsPanel = ({ readOnlyStudio }) => {
     const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     const noComposition = !composition;
     const schema = (0, react_1.useMemo)(() => {
-        if (!z) {
-            return 'no-zod';
-        }
+        var _a;
         if (noComposition) {
             return 'no-composition';
         }
-        if (!composition.schema) {
-            return 'no-schema';
-        }
-        if (!(typeof composition.schema.safeParse ===
-            'function')) {
-            throw new Error('A value which is not a Zod schema was passed to `schema`');
-        }
-        return composition.schema;
-    }, [composition === null || composition === void 0 ? void 0 : composition.schema, noComposition, z]);
+        return (0, infer_zod_schema_from_value_1.resolveCompositionSchema)({
+            explicitSchema: composition.schema,
+            defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
+            z,
+            zodTypes,
+        });
+    }, [composition, noComposition, z, zodTypes]);
     const currentDefaultProps = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (composition === null) {

package/dist/components/PlaybackRateSelector.js

@@ -57,7 +57,7 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate, }) => {
         playbackRate,
         setPlaybackRate,
     });
-    if (isStill || canvasContent === null || canvasContent.type === 'asset') {
+    if (isStill || canvasContent === null) {
         return null;
     }
     return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, labelWidth: 30, selectedId: selectedId, values: items, renderLeftItem: (color) => (jsx_runtime_1.jsx(playback_rate_1.PlaybackRateIcon, { color: color, playbackRate: playbackRate })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));