@remotion/studio 4.0.498 → 4.0.500

package/dist/components/Menu/MenuItem.js

@@ -16,7 +16,7 @@ const portals_1 = require("./portals");
 const styles_1 = require("./styles");
 const container = {
     fontSize: 13,
-    color: colors_1.WHITE,
+    color: colors_1.WHITE_ALPHA_80,
     paddingLeft: 10,
     paddingRight: 10,
     cursor: 'default',
@@ -37,6 +37,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
     const containerStyle = (0, react_1.useMemo)(() => {
         return {
             ...container,
+            color: hovered || selected ? colors_1.WHITE : colors_1.WHITE_ALPHA_80,
             backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
                 hovered,
                 selected,

package/dist/components/MenuCompositionName.js

@@ -6,8 +6,10 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const actions_1 = require("./RenderQueue/actions");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const baseStyle = {
     color: 'inherit',
@@ -35,7 +37,7 @@ const slashStyle = {
     top: 1,
 };
 const MenuCompositionName = () => {
-    var _a;
+    var _a, _b;
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
@@ -48,17 +50,30 @@ const MenuCompositionName = () => {
         }
         return ((_a = compositions.find((c) => c.id === canvasContent.compositionId)) !== null && _a !== void 0 ? _a : null);
     }, [canvasContent, compositions]);
+    const asset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' ? canvasContent.asset : null;
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
-    const canOpen = resolvedLocation &&
+    const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
+    const canOpenComposition = resolvedLocation &&
         window.remotion_editorName &&
         connectionStatus === 'connected';
+    const canOpenAsset = asset !== null &&
+        window.remotion_publicFolderExists !== null &&
+        connectionStatus === 'connected';
+    const canOpen = canOpenComposition || canOpenAsset;
     const handleClick = (0, react_1.useCallback)(async () => {
-        if (!canOpen || !resolvedLocation) {
+        if (!canOpen || opening) {
             return;
         }
         setOpening(true);
         try {
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+            if (asset !== null && window.remotion_publicFolderExists !== null) {
+                await (0, actions_1.openInFileExplorer)({
+                    directory: `${window.remotion_publicFolderExists}/${asset}`,
+                });
+            }
+            else if (resolvedLocation) {
+                await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+            }
         }
         catch (err) {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
@@ -66,16 +81,24 @@ const MenuCompositionName = () => {
         finally {
             setOpening(false);
         }
-    }, [canOpen, resolvedLocation]);
-    if (!composition) {
+    }, [asset, canOpen, opening, resolvedLocation]);
+    if (!composition && asset === null) {
         return null;
     }
+    const name = (_b = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _b !== void 0 ? _b : asset;
+    const title = composition
+        ? canOpenComposition
+            ? `Open in ${window.remotion_editorName}`
+            : composition.id
+        : canOpenAsset
+            ? `Show in ${fileManagerName}`
+            : (asset !== null && asset !== void 0 ? asset : undefined);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), jsx_runtime_1.jsx("a", { style: canOpen && !opening
                     ? hovered
                         ? clickableHoveredStyle
                         : clickableStyle
-                    : compositionNameStyle, title: canOpen ? `Open in ${window.remotion_editorName}` : composition.id, onClick: handleClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: composition.id })
+                    : compositionNameStyle, title: title, onClick: handleClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: name })
         ] }));
 };
 exports.MenuCompositionName = MenuCompositionName;

package/dist/components/MenuToolbar.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-export declare const MENU_TOOLBAR_HEIGHT = 30;
 export declare const MenuToolbar: React.FC<{
     readonly readOnlyStudio: boolean;
 }>;

package/dist/components/MenuToolbar.js

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuToolbar = exports.MENU_TOOLBAR_HEIGHT = void 0;
+exports.MenuToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const use_menu_structure_1 = require("../helpers/use-menu-structure");
 const layout_1 = require("./layout");
+const menu_toolbar_height_1 = require("./menu-toolbar-height");
 const MenuItem_1 = require("./Menu/MenuItem");
 const MenuBuildIndicator_1 = require("./MenuBuildIndicator");
 const SidebarCollapserControls_1 = require("./SidebarCollapserControls");
 const UndoRedoButtons_1 = require("./UndoRedoButtons");
 const UpdateCheck_1 = require("./UpdateCheck");
-exports.MENU_TOOLBAR_HEIGHT = 30;
 const row = {
     alignItems: 'center',
     flexDirection: 'row',
@@ -21,9 +21,9 @@ const row = {
     borderBottom: colors_1.BORDER_BLACK,
     boxSizing: 'border-box',
     fontSize: 13,
-    height: exports.MENU_TOOLBAR_HEIGHT,
+    height: menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT,
     paddingLeft: 6,
-    paddingRight: 10,
+    paddingRight: 6,
     backgroundColor: colors_1.BACKGROUND,
 };
 const flex = {
@@ -98,10 +98,11 @@ const MenuToolbar = ({ readOnlyStudio }) => {
         e.stopPropagation();
     }, []);
     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: [structure.map((s) => {
+            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [
+                    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 ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, {}), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [readOnlyStudio ? null : jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}), jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControls, {})
-                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 })
+                    }), readOnlyStudio ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, {}), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [readOnlyStudio ? null : jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}), jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
+                ] })
         ] }));
 };
 exports.MenuToolbar = MenuToolbar;

package/dist/components/MobilePanel.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export default function MobilePanel({ children, onClose }: {
+export default function MobilePanel({ children, onClose, side }: {
     children: React.ReactNode;
     onClose: () => void;
+    side: 'left' | 'right';
 }): React.ReactPortal;

package/dist/components/MobilePanel.js

@@ -5,39 +5,43 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = MobilePanel;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
-const InlineAction_1 = require("./InlineAction");
+const menu_toolbar_height_1 = require("./menu-toolbar-height");
 const portals_1 = require("./Menu/portals");
-const CancelButton_1 = require("./NewComposition/CancelButton");
-const container = {
+const overlay = {
     position: 'fixed',
-    top: 0,
+    top: menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT,
     left: 0,
     width: '100%',
-    height: '100%',
-    padding: '0 0px 50px 0px',
-    background: colors_1.BACKGROUND,
-};
-const buttonContainer = {
-    height: '40px',
-    width: '100%',
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'flex-end',
-    paddingRight: 8,
+    height: `calc(100% - ${menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT}px)`,
 };
-const button = {
-    height: 16,
-    width: 16,
-    flexShrink: 0,
-};
-const renderCloseIcon = (color) => {
-    return jsx_runtime_1.jsx(CancelButton_1.CancelIcon, { style: { ...button, color } });
+const panel = {
+    position: 'fixed',
+    top: menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT,
+    width: 'min(350px, calc(100% - 50px))',
+    height: `calc(100% - ${menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT}px)`,
+    overflow: 'hidden',
+    background: colors_1.BACKGROUND,
+    boxShadow: colors_1.SHADOW_BLACK,
 };
-function MobilePanel({ children, onClose, }) {
+function MobilePanel({ children, onClose, side, }) {
     const { currentZIndex } = (0, z_index_1.useZIndex)();
-    return react_dom_1.default.createPortal(jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: buttonContainer, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClose, renderAction: renderCloseIcon, title: "Close sidebar" }) }), children] }), (0, portals_1.getPortal)(currentZIndex));
+    const onOutsideClick = react_1.default.useCallback((target) => {
+        var _a;
+        const element = target instanceof Element ? target : null;
+        const toggleSelector = `[data-sidebar-toggle="${side}"]`;
+        if ((element === null || element === void 0 ? void 0 : element.closest(toggleSelector)) ||
+            ((_a = element === null || element === void 0 ? void 0 : element.closest('button')) === null || _a === void 0 ? void 0 : _a.querySelector(toggleSelector))) {
+            return;
+        }
+        onClose();
+    }, [onClose, side]);
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: overlay, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onClose, onOutsideClick: onOutsideClick, children: jsx_runtime_1.jsx("div", { style: {
+                    ...panel,
+                    left: side === 'left' ? 0 : undefined,
+                    right: side === 'right' ? 0 : undefined,
+                }, children: children }) }) }), (0, portals_1.getPortal)(currentZIndex));
 }

package/dist/components/ModalContainer.d.ts

@@ -6,4 +6,5 @@ export declare const ModalContainer: React.FC<{
     readonly onOutsideClick: () => void;
     readonly children: React.ReactNode;
     readonly noZIndex?: boolean;
+    readonly panelStyle?: React.CSSProperties;
 }>;

package/dist/components/ModalContainer.js

@@ -29,11 +29,11 @@ const panel = {
     color: colors_1.WHITE,
     margin: 'auto',
 };
-const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex }) => {
+const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex, panelStyle }) => {
     const onPointerDown = (0, react_1.useCallback)((e) => {
         // Prevent deselection of currently selected items
         e.stopPropagation();
     }, []);
-    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: panel, children: children }) }) }));
+    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: { ...panel, ...panelStyle }, children: children }) }) }));
 };
 exports.ModalContainer = ModalContainer;

package/dist/components/Modals.js

@@ -36,6 +36,6 @@ const Modals = ({ readOnlyStudio }) => {
         'connected';
     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 })), 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 === 'configure-license' && (jsx_runtime_1.jsx(ConfigureLicenseModal_1.ConfigureLicenseModal, { initialPublicLicenseKey: modalContextType.initialPublicLicenseKey })), 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 === '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 })), 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 === '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 })), 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/DismissableModal.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 export declare const DismissableModal: React.FC<{
     readonly children: React.ReactNode;
+    readonly panelStyle?: React.CSSProperties;
 }>;

package/dist/components/NewComposition/DismissableModal.js

@@ -5,11 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const modals_1 = require("../../state/modals");
 const ModalContainer_1 = require("../ModalContainer");
-const DismissableModal = ({ children }) => {
+const DismissableModal = ({ children, panelStyle }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
-    return (jsx_runtime_1.jsx(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: children }));
+    return (jsx_runtime_1.jsx(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, panelStyle: panelStyle, children: children }));
 };
 exports.DismissableModal = DismissableModal;

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

@@ -1,7 +1,40 @@
 import type { InputHTMLAttributes } from 'react';
 import React from 'react';
 import type { RemInputStatus } from './RemInput';
+type InputDraggerValidationResult = {
+    readonly valid: true;
+    readonly value: number;
+} | {
+    readonly valid: false;
+    readonly message: string;
+};
 export declare const inputDraggerContainerStyle: React.CSSProperties;
+export type InputDraggerExpressionResult = {
+    readonly status: 'valid';
+    readonly value: number;
+} | {
+    readonly status: 'incomplete' | 'invalid';
+};
+export declare const parseInputDraggerExpression: (input: string) => InputDraggerExpressionResult;
+export declare const parseInputDraggerNumber: (value: string) => number | null;
+export declare const isInputDraggerValueAlignedToStep: ({ min, step, value, }: {
+    readonly min: string | number | undefined;
+    readonly step: string | number | undefined;
+    readonly value: number;
+}) => boolean;
+export declare const validateInputDraggerValue: ({ max, min, step, value, }: {
+    readonly max: string | number | undefined;
+    readonly min: string | number | undefined;
+    readonly step: string | number | undefined;
+    readonly value: string;
+}) => InputDraggerValidationResult;
+export declare const deriveInputDraggerArrowValue: ({ direction, max, min, step, value, }: {
+    readonly direction: -1 | 1;
+    readonly max: string | number | undefined;
+    readonly min: string | number | undefined;
+    readonly step: string | number | undefined;
+    readonly value: number;
+}) => number;
 export declare const deriveInputDraggerStep: ({ min, snapToStep, step, }: {
     readonly min: string | number | undefined;
     readonly snapToStep: boolean;
@@ -33,3 +66,4 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly dragDecimalPlaces?: number | undefined;
     readonly dragSensitivity?: number | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
+export {};