@remotion/studio 4.0.520 → 4.0.522

package/dist/components/MenuCompositionName.js

@@ -4,26 +4,58 @@ 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");
+const modals_1 = require("../state/modals");
+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 baseStyle = {
-    color: 'inherit',
+    cursor: 'default',
     textDecoration: 'none',
     fontSize: 'inherit',
     textUnderlineOffset: 2,
     whiteSpace: 'nowrap',
 };
+const assetNameStyle = {
+    ...baseStyle,
+    color: colors_1.WHITE_ALPHA_80,
+};
+const contextMenuStyle = {
+    alignItems: 'center',
+    color: 'inherit',
+    display: 'flex',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+};
 const compositionNameStyle = {
     ...baseStyle,
-    cursor: 'default',
+    appearance: 'none',
+    border: 'none',
+    backgroundColor: colors_1.TRANSPARENT,
+    fontFamily: 'inherit',
+    fontSize: 13,
+    height: 'auto',
+    lineHeight: 1.5,
+    margin: 0,
+    padding: 0,
+    width: 'auto',
+    ...hoverable_1.NO_HOVER_BACKGROUND_STYLE,
 };
 const slashStyle = {
     color: colors_1.LIGHT_TEXT,
     marginInline: 4,
+    opacity: 0.8,
     position: 'relative',
     top: 1,
 };
 const MenuCompositionName = () => {
-    var _a;
+    var _a, _b;
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const composition = (0, react_1.useMemo)(() => {
         var _a;
@@ -33,12 +65,36 @@ 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 { 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 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,
+            resolvedLocation,
+            setSelectedModal,
+            readOnlyStudio: window.remotion_isReadOnlyStudio,
+        });
+    }, [
+        composition,
+        connectionStatus,
+        defaultEditorId,
+        defaultEditorName,
+        resolvedLocation,
+        setSelectedModal,
+    ]);
     if (!composition && asset === null) {
         return null;
     }
-    const name = (_a = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _a !== void 0 ? _a : asset;
+    const name = (_b = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _b !== void 0 ? _b : asset;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), jsx_runtime_1.jsx("span", { style: compositionNameStyle, children: name })
-        ] }));
+            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), composition ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, style: contextMenuStyle, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { "aria-label": "Open composition menu", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, getItems: getContextMenuItems, hoveredColor: colors_1.WHITE, renderAction: () => composition.id, style: compositionNameStyle, title: "Open composition menu", unhoveredColor: colors_1.WHITE_ALPHA_80, variant: null }) })) : (jsx_runtime_1.jsx("span", { style: assetNameStyle, children: name }))] }));
 };
 exports.MenuCompositionName = MenuCompositionName;

package/dist/components/ModalContainer.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export declare const getMaxModalWidth: (width: number) => string;
 export declare const getMaxModalHeight: (height: number) => string;
 export declare const ModalContainer: React.FC<{
+    readonly ariaLabelledBy?: string;
     readonly onEscape: () => void;
     readonly onOutsideClick: () => void;
     readonly children: React.ReactNode;

package/dist/components/ModalContainer.js

@@ -29,11 +29,11 @@ const panel = {
     color: colors_1.WHITE,
     margin: 'auto',
 };
-const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex, panelStyle }) => {
+const ModalContainer = ({ ariaLabelledBy, 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, ...panelStyle }, children: children }) }) }));
+    return (jsx_runtime_1.jsx("div", { "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : undefined, "aria-modal": "true", className: "css-reset", role: "dialog", style: backgroundOverlay, 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/ModalHeader.js

@@ -16,8 +16,12 @@ const container = {
     borderBottom: colors_1.BORDER_BLACK,
 };
 const titleStyle = {
-    fontSize: 14,
     color: colors_1.WHITE,
+    fontSize: 14,
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
 };
 const icon = {
     height: 20,

package/dist/components/QuickSwitcher/asset-search.d.ts

@@ -6,4 +6,3 @@ export declare const filterAssetsByType: ({ assets, query, }: {
     readonly assets: StaticFile[];
     readonly query: string;
 };
-export declare const getAssetSearchQueryForComponent: (componentIdentity: string | null) => string;

package/dist/components/QuickSwitcher/asset-search.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAssetSearchQueryForComponent = exports.filterAssetsByType = void 0;
+exports.filterAssetsByType = void 0;
 const get_preview_file_type_1 = require("../../helpers/get-preview-file-type");
 const typeFilterRegex = /(^|\s)type:([^\s]+)/gi;
 const filterAssetsByType = ({ assets, query, }) => {
@@ -26,18 +26,3 @@ const filterAssetsByType = ({ assets, query, }) => {
     };
 };
 exports.filterAssetsByType = filterAssetsByType;
-const componentAssetTypes = {
-    'dev.remotion.media.Audio': 'audio',
-    'dev.remotion.media.Video': 'video',
-    'dev.remotion.remotion.AnimatedImage': 'image',
-    'dev.remotion.remotion.CanvasImage': 'image',
-    'dev.remotion.remotion.Img': 'image',
-};
-const getAssetSearchQueryForComponent = (componentIdentity) => {
-    if (componentIdentity === null) {
-        return '';
-    }
-    const assetType = componentAssetTypes[componentIdentity];
-    return assetType ? `type:${assetType} ` : '';
-};
-exports.getAssetSearchQueryForComponent = getAssetSearchQueryForComponent;

package/dist/components/RenderButton.js

@@ -282,7 +282,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
                 {
                     type: 'item',
                     id: 'client-render',
-                    label: 'Render on web',
+                    label: 'Render in browser',
                     value: 'client-render',
                     onClick: () => handleRenderTypeChange('client-render'),
                     keyHint: null,
@@ -336,7 +336,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         ? 'Render'
         : renderType === 'render-command'
             ? 'Render via CLI'
-            : 'Render on web';
+            : 'Render in browser';
     const showRenderLabel = !narrow || renderType !== 'server-render';
     const segments = (0, react_1.useMemo)(() => {
         return [

package/dist/components/RenderModal/CliCopyButton.js

@@ -4,20 +4,15 @@ exports.CliCopyButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
-const clipboard_1 = require("../../icons/clipboard");
+const copy_text_1 = require("../../helpers/copy-text");
+const use_copy_feedback_1 = require("../../helpers/use-copy-feedback");
+const copy_1 = require("../../icons/copy");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const svgStyle = {
     width: 16,
     height: 16,
     verticalAlign: 'sub',
 };
-const copiedStyle = {
-    fontSize: '14px',
-    minHeight: '30px',
-    minWidth: '30px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-};
 const buttonStyle = {
     width: '30px',
     height: '30px',
@@ -28,33 +23,24 @@ const buttonStyle = {
     justifyContent: 'center',
 };
 const CliCopyButton = ({ valueToCopy, }) => {
-    const [copied, setCopied] = (0, react_1.useState)(false);
+    const { copied, markCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const fillColor = (0, react_1.useMemo)(() => {
         return hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT;
     }, [hovered]);
-    const clipboardIcon = jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: fillColor, style: svgStyle });
-    const checkSvg = (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: svgStyle, children: jsx_runtime_1.jsx("path", { fill: fillColor, d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }) }));
+    const copyIcon = (jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, color: fillColor, style: svgStyle }));
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
-    (0, react_1.useEffect)(() => {
-        if (!copied) {
-            return;
-        }
-        const handleClear = () => {
-            setCopied(false);
-            setHovered(false);
-        };
-        const to = setTimeout(() => handleClear(), 2000);
-        return () => clearTimeout(to);
-    }, [copied]);
-    return copied ? (jsx_runtime_1.jsx("span", { style: copiedStyle, children: checkSvg })) : (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: () => {
-            navigator.clipboard.writeText(valueToCopy);
-            setCopied(true);
-        }, children: clipboardIcon }));
+    return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: () => {
+            (0, copy_text_1.copyText)(valueToCopy)
+                .then(markCopied)
+                .catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
+            });
+        }, children: copyIcon }));
 };
 exports.CliCopyButton = CliCopyButton;

package/dist/components/RenderModal/RenderStatusModal.js

@@ -41,6 +41,7 @@ const buttonRow = {
     justifyContent: 'flex-end',
 };
 const RenderStatusModal = ({ jobId, }) => {
+    var _a;
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { jobs, removeClientJob, cancelClientJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const job = jobs.find((j) => j.id === jobId);
@@ -88,9 +89,14 @@ const RenderStatusModal = ({ jobId, }) => {
     if (job.status === 'idle') {
         throw new Error('should not have rendered this modal');
     }
+    const errorDetails = job.status === 'failed'
+        ? ((_a = job.error.stack) === null || _a === void 0 ? void 0 : _a.split('\n')[0].includes(job.error.message))
+            ? job.error.stack
+            : [job.error.message, job.error.stack].filter(Boolean).join('\n')
+        : null;
     return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${job.compositionId}` }), jsx_runtime_1.jsxs("div", { style: container, children: [job.status === 'failed' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx("p", { children: "The render failed because of the following error:" }), jsx_runtime_1.jsx("div", { className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, style: codeBlock, children: job.error.stack })
+                            jsx_runtime_1.jsx("p", { children: "The render failed because of the following error:" }), jsx_runtime_1.jsx("div", { className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, style: codeBlock, children: errorDetails })
                         ] })) : null, (job.status === 'done' || job.status === 'running') &&
                         (isClientJob ? (jsx_runtime_1.jsx(ClientRenderProgress_1.ClientRenderProgress, { job: job })) : (jsx_runtime_1.jsx(GuiRenderStatus_1.GuiRenderStatus, { job: job }))), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsxs("div", { style: buttonRow, children: [job.status === 'running' ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: onClickOnCancel, children: "Cancel render" })) : (jsx_runtime_1.jsx(Button_1.Button, { onClick: onClickOnRemove, children: "Remove render" })), jsx_runtime_1.jsx(layout_1.Flex, {}), job.status === 'failed' ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: onRetry, children: "Retry" })) : null, jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(Button_1.Button, { onClick: onQuit, children: "Close" })
                         ] })

package/dist/components/RenderModal/ServerRenderModal.js

@@ -981,7 +981,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
         });
     }, [availablePixelFormats, pixelFormat]);
     return (jsx_runtime_1.jsxs("div", { style: render_modals_1.outerModalStyle, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id} ${readOnlyStudio ? 'via CLI' : 'on the server'}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
                     jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
                             ...render_modals_1.buttonStyle,
                             backgroundColor: outnameValidation.valid ? colors_1.BLUE : colors_1.BLUE_DISABLED,

package/dist/components/RenderModal/WebRenderModal.js

@@ -416,7 +416,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         pageResponsiveness,
     ]);
     return (jsx_runtime_1.jsxs("div", { style: render_modals_1.outerModalStyle, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id} in the browser` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
                     jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: onAddToQueue, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: ["Render ", renderMode, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -85,7 +85,7 @@ const ClientRenderQueueProcessor = () => {
                     progress: progress.progress,
                 });
             },
-            outputTarget: 'web-fs',
+            outputTarget: null,
             licenseKey: (_c = job.licenseKey) !== null && _c !== void 0 ? _c : undefined,
             pageResponsiveness: job.pageResponsiveness,
             allowHtmlInCanvas: job.allowHtmlInCanvas,

package/dist/components/RenderQueue/RenderQueueCopyToClipboard.js

@@ -5,7 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const get_asset_metadata_1 = require("../../helpers/get-asset-metadata");
-const clipboard_1 = require("../../icons/clipboard");
+const use_copy_feedback_1 = require("../../helpers/use-copy-feedback");
+const copy_1 = require("../../icons/copy");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const revealIconStyle = {
@@ -29,9 +30,10 @@ const supportsCopyingToClipboard = (job) => {
 };
 exports.supportsCopyingToClipboard = supportsCopyingToClipboard;
 const RenderQueueCopyToClipboard = ({ job }) => {
+    const { copied, markCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
-    }, []);
+        return jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, style: revealIconStyle, color: color });
+    }, [copied]);
     const onClick = (0, react_1.useCallback)(async (e) => {
         e.stopPropagation();
         try {
@@ -47,12 +49,13 @@ const RenderQueueCopyToClipboard = ({ job }) => {
                     [contentType]: blob,
                 }),
             ]);
+            markCopied();
             (0, NotificationCenter_1.showNotification)('Copied to clipboard!', 1000);
         }
         catch (err) {
             (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 2000);
         }
-    }, [job.outName]);
+    }, [job.outName, markCopied]);
     return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: "Copy to clipboard", renderAction: renderCopyAction, onClick: onClick }));
 };
 exports.RenderQueueCopyToClipboard = RenderQueueCopyToClipboard;

package/dist/components/SettingsModal.js

@@ -30,6 +30,7 @@ const SkillsSettings_1 = require("./SkillsSettings");
 const StudioSettings_1 = require("./StudioSettings");
 const vertical_1 = require("./Tabs/vertical");
 const UpdatesSettings_1 = require("./UpdatesSettings");
+const UpdateStatusContext_1 = require("./UpdateStatusContext");
 const hiddenPanel = {
     display: 'none',
 };
@@ -64,11 +65,13 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     const { setPublicLicenseKey } = (0, SettingsContext_1.useSettings)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
-    const showUpdates = (0, can_show_updates_1.canShowUpdates)({
-        connectionStatus: previewServerState.type,
-        isBrowserStudio,
-        readOnlyStudio: window.remotion_isReadOnlyStudio,
-    });
+    const { upgradeState } = (0, UpdateStatusContext_1.useUpdateStatus)();
+    const showUpdates = upgradeState !== 'idle' ||
+        (0, can_show_updates_1.canShowUpdates)({
+            connectionStatus: previewServerState.type,
+            isBrowserStudio,
+            readOnlyStudio: window.remotion_isReadOnlyStudio,
+        });
     const packageManager = window.remotion_packageManager === 'unknown'
         ? null
         : window.remotion_packageManager;

package/dist/components/SidebarCollapserControls.js

@@ -19,7 +19,7 @@ const style = {
     position: 'relative',
 };
 const SidebarCollapserControl = ({ side }) => {
-    const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const { setSidebarCollapsedState, sidebarCollapsedStateRight, sidebarCollapsedDuringDrag, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const leftSidebarStatus = (0, TopPanel_1.useResponsiveSidebarStatus)();
     const leftIcon = (0, react_1.useCallback)((color) => {
@@ -27,9 +27,12 @@ const SidebarCollapserControl = ({ side }) => {
             width: '35%',
             height: '100%',
             borderRight: '1px solid ' + color,
-            background: leftSidebarStatus === 'expanded' ? color : colors_1.TRANSPARENT,
+            background: leftSidebarStatus === 'expanded' &&
+                sidebarCollapsedDuringDrag !== 'left'
+                ? color
+                : colors_1.TRANSPARENT,
         };
-    }, [leftSidebarStatus]);
+    }, [leftSidebarStatus, sidebarCollapsedDuringDrag]);
     const rightIcon = (0, react_1.useCallback)((color) => {
         return {
             width: '35%',
@@ -37,9 +40,12 @@ const SidebarCollapserControl = ({ side }) => {
             right: 0,
             position: 'absolute',
             borderLeft: '1px solid ' + color,
-            background: sidebarCollapsedStateRight === 'expanded' ? color : colors_1.TRANSPARENT,
+            background: sidebarCollapsedStateRight === 'expanded' &&
+                sidebarCollapsedDuringDrag !== 'right'
+                ? color
+                : colors_1.TRANSPARENT,
         };
-    }, [sidebarCollapsedStateRight]);
+    }, [sidebarCollapsedStateRight, sidebarCollapsedDuringDrag]);
     const toggleLeft = (0, react_1.useCallback)(() => {
         setSidebarCollapsedState({
             left: (s) => {

package/dist/components/SkillsSettings.js

@@ -5,8 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
+const use_copy_feedback_1 = require("../helpers/use-copy-feedback");
 const check_circle_filled_1 = require("../icons/check-circle-filled");
-const clipboard_1 = require("../icons/clipboard");
+const copy_1 = require("../icons/copy");
 const minus_1 = require("../icons/minus");
 const InlineAction_1 = require("./InlineAction");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
@@ -94,19 +95,22 @@ const loading = {
 const SkillsSettings = () => {
     var _a;
     const { error, remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
+    const { copied, markCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const installedSkills = (0, react_1.useMemo)(() => {
         var _a;
         return ((_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.skills.filter(({ installedGlobally, installedInProject }) => installedGlobally || installedInProject).length) !== null && _a !== void 0 ? _a : 0);
     }, [remotionSkillsInfo]);
     const missingSkills = ((_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.skills.length) !== null && _a !== void 0 ? _a : 0) - installedSkills;
     const onCopy = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(INSTALL_COMMAND).catch((err) => {
+        (0, copy_text_1.copyText)(INSTALL_COMMAND)
+            .then(markCopied)
+            .catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
-    }, []);
+    }, [markCopied]);
     const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
-    }, []);
+        return jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, color: color, style: copyIcon });
+    }, [copied]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [remotionSkillsInfo === null && error === null ? (jsx_runtime_1.jsx("p", { style: loading, children: "Checking installed skills..." })) : null, remotionSkillsInfo === null && error ? (jsx_runtime_1.jsx("div", { style: { marginTop: 14 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: error, align: "flex-start", type: "error" }) })) : null, missingSkills > 0 ? (jsx_runtime_1.jsxs("div", { children: [
                     jsx_runtime_1.jsx("p", { style: description, children: "Not all skills are installed. Run this command in the project directory, then reload Studio and restart your coding agent." }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
                             jsx_runtime_1.jsx("pre", { style: command, children: INSTALL_COMMAND }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy install command" })

package/dist/components/Splitter/SplitterContainer.js

@@ -1,9 +1,42 @@
 "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.SplitterContainer = exports.containerColumn = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const timeline_1 = require("../../state/timeline");
 const SplitterContext_1 = require("./SplitterContext");
 const SplitterHandle_1 = require("./SplitterHandle");
@@ -21,8 +54,10 @@ exports.containerColumn = {
     height: 0,
 };
 const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, maxFlexerSize, minFlexerSize, maxAntiFlexerSize, minAntiFlexerSize, id, }) => {
+    const parentLayout = (0, react_1.useContext)(SplitterContext_1.SplitterLayoutContext);
     const [initialTimelineFlex, persistFlex] = (0, timeline_1.useTimelineFlex)(id);
     const [flexValue, setFlexValue] = (0, react_1.useState)(initialTimelineFlex !== null && initialTimelineFlex !== void 0 ? initialTimelineFlex : defaultFlex);
+    const [collapsedDuringDrag, setCollapsedDuringDrag] = (0, react_1.useState)(null);
     const ref = (0, react_1.useRef)(null);
     const isDragging = (0, react_1.useRef)(false);
     const size = player_1.PlayerInternals.useElementSize(ref, {
@@ -46,6 +81,8 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
     const value = (0, react_1.useMemo)(() => {
         return {
             flexValue: effectiveFlexValue,
+            collapsedDuringDrag,
+            setCollapsedDuringDrag,
             ref,
             setFlexValue,
             isDragging,
@@ -62,6 +99,7 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         };
     }, [
         defaultFlex,
+        collapsedDuringDrag,
         effectiveFlexValue,
         id,
         maxFlex,
@@ -74,14 +112,29 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         persistFlex,
         ref,
     ]);
-    (0, react_1.useEffect)(() => {
-        const frame = requestAnimationFrame(() => {
-            player_1.PlayerInternals.updateAllElementsSizes();
-        });
-        return () => {
-            cancelAnimationFrame(frame);
-        };
-    });
-    return (jsx_runtime_1.jsx(SplitterContext_1.SplitterContext.Provider, { value: value, children: jsx_runtime_1.jsx("div", { ref: ref, style: orientation === 'horizontal' ? exports.containerColumn : containerRow, children: children }) }));
+    const childCount = react_1.default.Children.toArray(children).length;
+    const layout = (0, react_1.useMemo)(() => ({
+        parentLayout,
+        effectiveFlexValue,
+        collapsedDuringDrag,
+        orientation,
+        width: size === null || size === void 0 ? void 0 : size.width,
+        height: size === null || size === void 0 ? void 0 : size.height,
+        childCount,
+    }), [
+        parentLayout,
+        effectiveFlexValue,
+        collapsedDuringDrag,
+        orientation,
+        size === null || size === void 0 ? void 0 : size.width,
+        size === null || size === void 0 ? void 0 : size.height,
+        childCount,
+    ]);
+    const refreshSize = size === null || size === void 0 ? void 0 : size.refresh;
+    (0, react_1.useLayoutEffect)(() => {
+        // Remeasure this splitter when its own or an ancestor's layout changes.
+        refreshSize === null || refreshSize === void 0 ? void 0 : refreshSize();
+    }, [layout, refreshSize]);
+    return (jsx_runtime_1.jsx(SplitterContext_1.SplitterLayoutContext.Provider, { value: layout, children: jsx_runtime_1.jsx(SplitterContext_1.SplitterContext.Provider, { value: value, children: jsx_runtime_1.jsx("div", { ref: ref, style: orientation === 'horizontal' ? exports.containerColumn : containerRow, children: children }) }) }));
 };
 exports.SplitterContainer = SplitterContainer;

package/dist/components/Splitter/SplitterContext.d.ts

@@ -6,6 +6,8 @@ export type SplitterDragState = false | {
 export type SplitterOrientation = 'horizontal' | 'vertical';
 export type TSplitterContext = {
     flexValue: number;
+    collapsedDuringDrag: 'left' | 'right' | null;
+    setCollapsedDuringDrag: (side: 'left' | 'right' | null) => void;
     setFlexValue: React.Dispatch<React.SetStateAction<number>>;
     orientation: SplitterOrientation;
     ref: React.RefObject<HTMLDivElement | null>;
@@ -36,4 +38,5 @@ export declare const getClampedSplitterFlex: ({ flexValue, ...bounds }: Pick<TSp
     readonly flexValue: number;
 }) => number;
 export declare const SplitterContext: React.Context<TSplitterContext>;
+export declare const SplitterLayoutContext: React.Context<object | null>;
 export {};

package/dist/components/Splitter/SplitterContext.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.SplitterContext = exports.getClampedSplitterFlex = exports.getSplitterFlexBounds = void 0;
+exports.SplitterLayoutContext = exports.SplitterContext = exports.getClampedSplitterFlex = exports.getSplitterFlexBounds = void 0;
 const react_1 = __importDefault(require("react"));
 const getSplitterFlexBounds = ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minAntiFlexerSize, minFlex, minFlexerSize, }) => {
     if (availableSize === null || availableSize <= 0) {
@@ -21,6 +21,8 @@ const getClampedSplitterFlex = ({ flexValue, ...bounds }) => {
 exports.getClampedSplitterFlex = getClampedSplitterFlex;
 exports.SplitterContext = react_1.default.createContext({
     flexValue: 1,
+    collapsedDuringDrag: null,
+    setCollapsedDuringDrag: () => undefined,
     ref: { current: null },
     setFlexValue: () => undefined,
     isDragging: { current: false },
@@ -35,3 +37,5 @@ exports.SplitterContext = react_1.default.createContext({
     id: '--',
     persistFlex: () => undefined,
 });
+// Propagate layout changes only through the affected splitter subtree.
+exports.SplitterLayoutContext = react_1.default.createContext(null);