@remotion/studio 4.0.525 → 4.0.526

package/dist/components/InspectorSequenceSection.js

@@ -21,7 +21,6 @@ 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 border_radius_representation_1 = require("./Timeline/border-radius-representation");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
@@ -51,10 +50,6 @@ const plusIcon = {
     width: 15,
     height: 15,
 };
-const effectsHeaderTitle = {
-    ...styles_1.sectionHeaderTitle,
-    flexShrink: 1,
-};
 const borderRadiusToggleIcon = {
     flexShrink: 0,
     height: 15,
@@ -293,30 +288,57 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             return next;
         });
     }, []);
-    const { controlRows, effectRows } = (0, react_1.useMemo)(() => {
+    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 setAdditionalSectionExpanded = (0, react_1.useCallback)((sectionId, expanded) => {
+        const expansionKey = getInspectorSectionExpansionKey({
+            nodePathInfo,
+            sectionId,
+        });
+        setSectionExpansionOverrides((previous) => {
+            if (previous[expansionKey] === expanded) {
+                return previous;
+            }
+            const next = { ...previous, [expansionKey]: expanded };
+            persistInspectorSectionExpansionOverrides(next);
+            return next;
+        });
+    }, [nodePathInfo]);
+    const toggleAdditionalSection = (0, react_1.useCallback)((sectionId) => {
+        setAdditionalSectionExpanded(sectionId, !isAdditionalSectionExpanded(sectionId));
+    }, [isAdditionalSectionExpanded, setAdditionalSectionExpanded]);
+    const effectsExpanded = isAdditionalSectionExpanded('effects');
+    const { controlRows, effectRows, hasEffects } = (0, react_1.useMemo)(() => {
         const controlNodes = [];
-        let effectsRoot = null;
+        let root = null;
         for (const node of tree) {
             if (isEffectsRoot(node)) {
-                effectsRoot = node;
+                root = node;
             }
             else {
                 controlNodes.push(node);
             }
         }
         return {
+            hasEffects: root !== null && root.children.length > 0,
             controlRows: (0, timeline_layout_1.flattenVisibleTreeNodes)({
                 nodes: controlNodes,
                 getIsExpanded,
             }),
-            effectRows: effectsRoot === null
+            effectRows: root === null || !effectsExpanded
                 ? []
                 : (0, timeline_layout_1.flattenVisibleTreeNodes)({
-                    nodes: effectsRoot.children,
+                    nodes: root.children,
                     getIsExpanded,
                 }),
         };
-    }, [getIsExpanded, tree]);
+    }, [effectsExpanded, getIsExpanded, tree]);
     (0, react_1.useEffect)(() => {
         if (selectedEffectKey === null ||
             inspectorRevealToken === null ||
@@ -335,6 +357,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         if (targetIndex === -1) {
             return;
         }
+        setAdditionalSectionExpanded('effects', true);
         const parentKeys = [];
         let { depth } = rows[targetIndex];
         for (let i = targetIndex - 1; i >= 0 && depth > 0; i--) {
@@ -354,7 +377,12 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             persistInspectorCollapsedKeys(next);
             return next;
         });
-    }, [inspectorRevealToken, selectedEffectKey, tree]);
+    }, [
+        inspectorRevealToken,
+        selectedEffectKey,
+        setAdditionalSectionExpanded,
+        tree,
+    ]);
     (0, react_1.useEffect)(() => {
         if (inspectorRevealToken === null) {
             return;
@@ -459,26 +487,6 @@ 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 visibleControlRows = controlGroups.flatMap((group) => {
         return isControlGroupExpanded(group) ? group.rows : [];
@@ -499,7 +507,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             ? runtimeValues.captions
             : []
         : null;
-    const showEffectsSection = nodePathInfo.supportsEffects || effectRows.length > 0;
+    const showEffectsSection = nodePathInfo.supportsEffects || hasEffects;
     const canAddEffect = nodePathInfo.supportsEffects &&
         previewServerState.type === 'connected' &&
         (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
@@ -508,6 +516,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         if (!canAddEffect || previewServerState.type !== 'connected') {
             return;
         }
+        setAdditionalSectionExpanded('effects', true);
         setSelectedModal({
             type: 'add-effect',
             clientId: previewServerState.clientId,
@@ -518,6 +527,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         canAddEffect,
         nodePathInfo.sequenceSubscriptionKey,
         previewServerState,
+        setAdditionalSectionExpanded,
         setSelectedModal,
         validatedLocation.source,
     ]);
@@ -563,8 +573,7 @@ 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: hasEffects ? () => toggleAdditionalSection('effects') : null }));
     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)));
     };

package/dist/components/InspectorSourceLocation.js

@@ -43,6 +43,7 @@ const sourceLocationLabelStyle = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon, size = 'default' }) => {

package/dist/components/KeyboardShortcutsSettings.js

@@ -37,7 +37,9 @@ 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 client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const settings_tab_availability_1 = require("../helpers/settings-tab-availability");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const caret_1 = require("../icons/caret");
 const Checkbox_1 = require("./Checkbox");
@@ -158,6 +160,12 @@ const KeyboardShortcutsSettings = () => {
     var _a;
     const { error: settingsError, revision, studioRuntimeConfig } = (0, SettingsContext_1.useSettings)();
     const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const canEdit = (0, settings_tab_availability_1.canEditStudioConfig)({
+        isBrowserStudio,
+        previewServerConnected: previewServerState.type === 'connected',
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+    });
     const [enabled, setEnabled] = (0, react_1.useState)(true);
     const [configuredShortcuts, setConfiguredShortcuts] = (0, react_1.useState)({});
     const [enabledEdited, setEnabledEdited] = (0, react_1.useState)(false);
@@ -212,7 +220,7 @@ const KeyboardShortcutsSettings = () => {
     }, [configuredShortcuts, enabled, enabledEdited, shortcutsEdited]);
     const ready = studioRuntimeConfig !== null && syncedRevision === revision;
     (0, use_auto_save_config_1.useAutoSaveConfig)({
-        enabled: ready && !isBrowserStudio,
+        enabled: ready && canEdit,
         onError: setError,
         ready,
         syncRevision: syncedRevision,
@@ -221,11 +229,11 @@ const KeyboardShortcutsSettings = () => {
     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: [
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [canEdit ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx("p", { style: dividerLabel, children: "General" }), jsx_runtime_1.jsxs("label", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Keyboard shortcuts" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: enabled, name: "keyboard-shortcuts", onChange: onEnabledChange }) })
                         ] })
-                ] })), visibleShortcutGroups.map((group, groupIndex) => (jsx_runtime_1.jsxs("div", { children: [
+                ] })) : null, visibleShortcutGroups.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) => {
                             var _a;
                             const configured = shortcut.actionId === null
@@ -306,7 +314,7 @@ const KeyboardShortcutsSettings = () => {
                                     shortcutIndex === group.shortcuts.length - 1
                                     ? lastShortcutRow
                                     : shortcutRow, children: [
-                                    jsx_runtime_1.jsx("span", { style: actionName, children: shortcut.action }), shortcut.actionId === null || isBrowserStudio ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                    jsx_runtime_1.jsx("span", { style: actionName, children: shortcut.action }), shortcut.actionId === null || !canEdit ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                             jsx_runtime_1.jsx("span", { style: shortcutCell, children: jsx_runtime_1.jsx(ShortcutChords, { values: shortcutValues }) }), jsx_runtime_1.jsx("span", {})
                                         ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                             jsx_runtime_1.jsx("span", { style: shortcutCell, children: jsx_runtime_1.jsx("button", { id: shortcutButtonId, type: "button", style: chordButton, "aria-label": `Change shortcut for ${shortcut.action}`, onClick: () => {

package/dist/components/LutPreview.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const LutPreview: React.FC<{
+    readonly src: string;
+}>;

package/dist/components/LutPreview.js

@@ -0,0 +1,192 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LutPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const cube_lut_1 = require("../helpers/cube-lut");
+const hoverable_1 = require("../helpers/hoverable");
+const z_index_1 = require("../state/z-index");
+const sampleImage = 'https://remotion.media/transition-bg-blue.jpg';
+const previewWidth = 640;
+const previewHeight = 427;
+const container = {
+    padding: 24,
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    minHeight: 0,
+};
+const comparison = {
+    position: 'relative',
+    flexShrink: 0,
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const canvasStyle = {
+    display: 'block',
+    width: '100%',
+    height: 'auto',
+    borderRadius: 4,
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const sliderStyle = {
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.TRANSPARENT,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
+    position: 'absolute',
+    inset: 0,
+    borderRadius: 4,
+    cursor: 'default',
+    touchAction: 'none',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const dividerStyle = {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: 2,
+    backgroundColor: colors_1.CURRENT_COLOR,
+    transform: 'translateX(-50%)',
+    pointerEvents: 'none',
+};
+const handleStyle = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 32,
+    height: 32,
+    borderRadius: '50%',
+    border: `2px solid ${colors_1.CURRENT_COLOR}`,
+    backgroundColor: colors_1.BACKGROUND,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+const message = {
+    color: colors_1.LIGHT_TEXT,
+    textAlign: 'center',
+    overflowWrap: 'anywhere',
+};
+const LutPreview = ({ src }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    const beforeRef = (0, react_1.useRef)(null);
+    const afterRef = (0, react_1.useRef)(null);
+    const [state, setState] = (0, react_1.useState)({ type: 'loading' });
+    const [position, setPosition] = (0, react_1.useState)(50);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const size = player_1.PlayerInternals.useElementSize(containerRef, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const updatePosition = (0, react_1.useCallback)((event) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        setPosition(Math.max(0, Math.min(100, ((event.clientX - rect.left) / rect.width) * 100)));
+    }, []);
+    const onPointerDown = (0, react_1.useCallback)((event) => {
+        if (event.button !== 0 || !event.isPrimary) {
+            return;
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        updatePosition(event);
+    }, [updatePosition]);
+    const onPointerMove = (0, react_1.useCallback)((event) => {
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            updatePosition(event);
+        }
+    }, [updatePosition]);
+    const onKeyDown = (0, react_1.useCallback)((event) => {
+        const step = event.shiftKey ? 10 : 1;
+        if (event.key === 'Home') {
+            setPosition(0);
+        }
+        else if (event.key === 'End') {
+            setPosition(100);
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+            setPosition((value) => Math.max(0, value - step));
+        }
+        else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+            setPosition((value) => Math.min(100, value + step));
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const controller = new AbortController();
+        const image = new Image();
+        image.crossOrigin = 'anonymous';
+        setState({ type: 'loading' });
+        const load = async () => {
+            var _a, _b;
+            const response = await fetch(src, { signal: controller.signal });
+            if (!response.ok) {
+                throw new Error(`Could not load LUT (HTTP ${response.status}).`);
+            }
+            const lut = (0, cube_lut_1.parseCubeLut)(await response.text());
+            if (controller.signal.aborted) {
+                return;
+            }
+            image.src = sampleImage;
+            try {
+                await image.decode();
+            }
+            catch (_c) {
+                throw new Error('Could not load the LUT sample image. Check your internet connection.');
+            }
+            if (controller.signal.aborted) {
+                return;
+            }
+            const before = (_a = beforeRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
+            const after = (_b = afterRef.current) === null || _b === void 0 ? void 0 : _b.getContext('2d');
+            if (!before || !after) {
+                throw new Error('Could not create the LUT preview canvas.');
+            }
+            before.drawImage(image, 0, 0, previewWidth, previewHeight);
+            const pixels = before.getImageData(0, 0, previewWidth, previewHeight);
+            (0, cube_lut_1.applyCubeLut)(pixels.data, lut);
+            after.putImageData(pixels, 0, 0);
+            setState({ type: 'loaded' });
+        };
+        load().catch((error) => {
+            if (!controller.signal.aborted) {
+                setState({
+                    type: 'error',
+                    error: error instanceof Error ? error.message : String(error),
+                });
+            }
+        });
+        return () => {
+            controller.abort();
+            image.removeAttribute('src');
+        };
+    }, [src]);
+    return (jsx_runtime_1.jsxs("div", { ref: containerRef, style: container, children: [state.type === 'error' ? (jsx_runtime_1.jsxs("div", { style: message, role: "alert", children: ["Could not preview LUT: ", state.error] })) : state.type === 'loading' ? (jsx_runtime_1.jsx("div", { style: message, role: "status", children: "Loading LUT preview..." })) : null, jsx_runtime_1.jsxs("div", { style: {
+                    ...comparison,
+                    width: size
+                        ? Math.max(0, Math.min(960, size.width - 48, ((size.height - 48) * previewWidth) / previewHeight))
+                        : 0,
+                    display: state.type === 'loaded' ? 'block' : 'none',
+                }, children: [
+                    jsx_runtime_1.jsx("canvas", { ref: afterRef, width: previewWidth, height: previewHeight, style: canvasStyle, role: "img", "aria-label": "Sample image after LUT" }), jsx_runtime_1.jsx("div", { style: {
+                            position: 'absolute',
+                            inset: 0,
+                            clipPath: `inset(0 ${100 - position}% 0 0)`,
+                        }, children: jsx_runtime_1.jsx("canvas", { ref: beforeRef, width: previewWidth, height: previewHeight, style: canvasStyle, role: "img", "aria-label": "Sample image before LUT" }) }), jsx_runtime_1.jsx("div", { role: "slider", "aria-label": "Before and after comparison", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(position), "aria-valuetext": `${Math.round(position)}% before, ${100 - Math.round(position)}% after`, tabIndex: tabIndex, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: sliderStyle, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onKeyDown: onKeyDown, children: jsx_runtime_1.jsx("div", { "aria-hidden": true, style: { ...dividerStyle, left: `${position}%` }, children: jsx_runtime_1.jsx("div", { style: handleStyle, children: jsx_runtime_1.jsx("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", children: jsx_runtime_1.jsx("path", { d: "M8 8 4 12l4 4M16 8l4 4-4 4", stroke: colors_1.CURRENT_COLOR, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }) })
+                ] })
+        ] }));
+};
+exports.LutPreview = LutPreview;

package/dist/components/MenuCompositionName.js

@@ -4,7 +4,6 @@ exports.MenuCompositionName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 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 hoverable_1 = require("../helpers/hoverable");
 const noop_1 = require("../helpers/noop");
@@ -13,7 +12,7 @@ const composition_menu_items_1 = require("./composition-menu-items");
 const ContextMenu_1 = require("./ContextMenu");
 const InlineDropdown_1 = require("./InlineDropdown");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
-const use_default_editor_info_1 = require("./use-default-editor-info");
+const use_open_in_menu_apps_1 = require("./use-open-in-menu-apps");
 const baseStyle = {
     cursor: 'default',
     textDecoration: 'none',
@@ -66,18 +65,15 @@ const MenuCompositionName = () => {
     }, [canvasContent, compositions]);
     const asset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' ? canvasContent.asset : null;
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
-    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(connectionStatus === 'connected');
+    const { connectionStatus, openInApps } = (0, use_open_in_menu_apps_1.useOpenInMenuApps)();
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         return (0, composition_menu_items_1.getCompositionContextMenuItems)({
             closeMenu: noop_1.noop,
             composition,
             connectionStatus,
-            editorId: defaultEditorId,
-            editorName: defaultEditorName,
             includeCompositionManagementItems: true,
+            openInApps,
             resolvedLocation,
             setSelectedModal,
             readOnlyStudio: window.remotion_isReadOnlyStudio,
@@ -85,8 +81,7 @@ const MenuCompositionName = () => {
     }, [
         composition,
         connectionStatus,
-        defaultEditorId,
-        defaultEditorName,
+        openInApps,
         resolvedLocation,
         setSelectedModal,
     ]);

package/dist/components/Modals.js

@@ -18,6 +18,7 @@ const EffectPickerModal_1 = require("./EffectPickerModal");
 const ElementInstallConfirmation_1 = require("./ElementInstallConfirmation");
 const ElementLibraryModal_1 = require("./ElementLibraryModal");
 const FixComputedValueModal_1 = require("./FixComputedValueModal");
+const GenerateWithAgentModal_1 = require("./GenerateWithAgentModal");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
@@ -104,12 +105,8 @@ const Modals = ({ readOnlyStudio }) => {
             })();
         });
     }, [confirm, isBrowserStudio, previewServerState, 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, {})), 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 &&
+    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' ? (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 === 'transcribe' ? (jsx_runtime_1.jsx(TranscriptionModalWithOptionalWhisper_1.TranscriptionModalWithOptionalWhisper, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'video-matting' ? (jsx_runtime_1.jsx(VideoMattingModalWithOptionalPackage_1.VideoMattingModalWithOptionalPackage, { state: modalContextType })) : null, 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 === 'asset-selection' ? (jsx_runtime_1.jsx(AssetSelectorModal_1.AssetSelectorModal, { readOnlyStudio: readOnlyStudio, state: modalContextType })) : null, modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), 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 === 'transcribe' ? (jsx_runtime_1.jsx(TranscriptionModalWithOptionalWhisper_1.TranscriptionModalWithOptionalWhisper, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'video-matting' ? (jsx_runtime_1.jsx(VideoMattingModalWithOptionalPackage_1.VideoMattingModalWithOptionalPackage, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'generate-with-agent' ? (jsx_runtime_1.jsx(GenerateWithAgentModal_1.GenerateWithAgentModal, { state: modalContextType })) : null, 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 === 'asset-selection' ? (jsx_runtime_1.jsx(AssetSelectorModal_1.AssetSelectorModal, { readOnlyStudio: readOnlyStudio, state: modalContextType })) : null, modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), 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/ModelsSettings.js

@@ -36,8 +36,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModelsSettings = 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 client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const optional_package_dependencies_1 = require("../helpers/optional-package-dependencies");
+const settings_tab_availability_1 = require("../helpers/settings-tab-availability");
 const Button_1 = require("./Button");
 const styles_1 = require("./InspectorPanel/styles");
 const OptionalPackageModal_1 = require("./OptionalPackageModal");
@@ -104,7 +107,7 @@ const errorStyle = {
     lineHeight: 1.4,
     margin: '8px 0 0',
 };
-const OptionalModelPackage = ({ children, label, packageName, style }) => {
+const OptionalModelPackage = ({ canInstall, children, label, packageName, style }) => {
     const installed = (0, OptionalPackageModal_1.useOptionalPackageInstalled)(packageName);
     const [installState, setInstallState] = (0, react_1.useState)({
         type: 'idle',
@@ -122,12 +125,20 @@ const OptionalModelPackage = ({ children, label, packageName, style }) => {
             jsx_runtime_1.jsxs("div", { style: headingRow, children: [
                     jsx_runtime_1.jsxs("div", { children: [
                             jsx_runtime_1.jsx("h3", { style: title, children: label }), jsx_runtime_1.jsx("p", { style: packageNameStyle, children: packageName })
-                        ] }), installed ? null : (jsx_runtime_1.jsx(Button_1.Button, { disabled: installState.type === 'installing', onClick: install, size: "compact", style: installButton, children: installState.type === 'installing' ? 'Installing…' : 'Install' }))] }), installed ? (jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx("p", { style: missingText, children: "Loading models\u2026" }), children: children })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsxs("p", { style: missingDescription, children: ["Install the package and ", optional_package_dependencies_1.TRANSFORMERS_PACKAGE, " to download and manage its models."] }), installState.type === 'error' ? (jsx_runtime_1.jsx("p", { style: errorStyle, children: installState.message })) : null] }))] }));
+                        ] }), installed || !canInstall ? null : (jsx_runtime_1.jsx(Button_1.Button, { disabled: installState.type === 'installing', onClick: install, size: "compact", style: installButton, children: installState.type === 'installing' ? 'Installing…' : 'Install' }))] }), installed ? (jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx("p", { style: missingText, children: "Loading models\u2026" }), children: children })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("p", { style: missingDescription, children: canInstall
+                            ? `Install the package and ${optional_package_dependencies_1.TRANSFORMERS_PACKAGE} to download and manage its models.`
+                            : 'Reconnect the Studio server to install this package and manage its models.' }), installState.type === 'error' ? (jsx_runtime_1.jsx("p", { style: errorStyle, children: installState.message })) : null] }))] }));
 };
 const ModelsSettings = () => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const canInstall = (0, settings_tab_availability_1.canInstallPackagesInStudio)({
+        isBrowserStudio: (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null,
+        previewServerConnected: previewServerState.type === 'connected',
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+    });
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("p", { style: overview, children: "Models are downloaded automatically when needed. You can also manage the browser cache here." }), jsx_runtime_1.jsx(OptionalModelPackage, { label: "Transcription", packageName: whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE, style: section, children: jsx_runtime_1.jsx(LazyWhisperModels, { description: null, indent: false, visible: true }) }), jsx_runtime_1.jsx(OptionalModelPackage, { label: "Video matting", packageName: video_matting_capability_1.VIDEO_MATTING_PACKAGE, style: lastSection, children: jsx_runtime_1.jsx(LazyVideoMattingModels, { description: null, indent: false, visible: true }) })
+            jsx_runtime_1.jsx("p", { style: overview, children: "Models are downloaded automatically when needed. You can also manage the browser cache here." }), jsx_runtime_1.jsx(OptionalModelPackage, { canInstall: canInstall, label: "Transcription", packageName: whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE, style: section, children: jsx_runtime_1.jsx(LazyWhisperModels, { description: null, indent: false, visible: true }) }), jsx_runtime_1.jsx(OptionalModelPackage, { canInstall: canInstall, label: "Video matting", packageName: video_matting_capability_1.VIDEO_MATTING_PACKAGE, style: lastSection, children: jsx_runtime_1.jsx(LazyVideoMattingModels, { description: null, indent: false, visible: true }) })
         ] }));
 };
 exports.ModelsSettings = ModelsSettings;

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

@@ -4,6 +4,5 @@ type CreatedNotification = {
     replaceContent: (newContent: React.ReactNode, durationInMs: number | null) => void;
 };
 export declare const showNotification: (content: React.ReactNode, durationInMs: number | null) => CreatedNotification;
-export declare const showCannotAddSequenceDropNotification: () => void;
 export declare const NotificationCenter: React.FC;
 export {};

package/dist/components/Notifications/NotificationCenter.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NotificationCenter = exports.showCannotAddSequenceDropNotification = exports.showNotification = void 0;
+exports.NotificationCenter = exports.showNotification = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
@@ -32,27 +32,6 @@ const showNotification = (content, durationInMs) => {
     });
 };
 exports.showNotification = showNotification;
-const CANNOT_ADD_SEQUENCE_DROP_NOTIFICATION = 'Cannot insert this item: This composition component cannot accept a new <Sequence>.';
-const CANNOT_ADD_SEQUENCE_NOTIFICATION_DURATION = 3000;
-let cannotAddSequenceNotification = null;
-let cannotAddSequenceDismissTimeout = null;
-const showCannotAddSequenceDropNotification = () => {
-    if (cannotAddSequenceNotification === null) {
-        cannotAddSequenceNotification = (0, exports.showNotification)(CANNOT_ADD_SEQUENCE_DROP_NOTIFICATION, null);
-    }
-    else {
-        cannotAddSequenceNotification.replaceContent(CANNOT_ADD_SEQUENCE_DROP_NOTIFICATION, null);
-    }
-    if (cannotAddSequenceDismissTimeout !== null) {
-        clearTimeout(cannotAddSequenceDismissTimeout);
-    }
-    cannotAddSequenceDismissTimeout = setTimeout(() => {
-        cannotAddSequenceNotification === null || cannotAddSequenceNotification === void 0 ? void 0 : cannotAddSequenceNotification.dismiss();
-        cannotAddSequenceNotification = null;
-        cannotAddSequenceDismissTimeout = null;
-    }, CANNOT_ADD_SEQUENCE_NOTIFICATION_DURATION);
-};
-exports.showCannotAddSequenceDropNotification = showCannotAddSequenceDropNotification;
 const NotificationCenter = () => {
     const [notifications, setNotifications] = (0, react_1.useState)([]);
     const { currentZIndex } = (0, z_index_1.useZIndex)();