@remotion/studio 4.0.524 → 4.0.525

package/dist/components/ActionTooltip.d.ts

@@ -5,5 +5,7 @@ export declare const ActionTooltip: React.FC<{
     /** Hover delay in milliseconds. Pass null to show immediately. */
     readonly delay: number | null;
     readonly dismissOnClick: boolean;
+    readonly side?: 'top' | 'right';
+    readonly triggerStyle?: React.CSSProperties;
     readonly children: React.ReactNode;
 }>;

package/dist/components/ActionTooltip.js

@@ -8,7 +8,7 @@ const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
-const triggerStyle = { display: 'inline-flex' };
+const defaultTriggerStyle = { display: 'inline-flex' };
 const tooltipStyle = {
     position: 'fixed',
     display: 'flex',
@@ -44,7 +44,7 @@ const shortcutStyle = {
 let visibleTooltipCount = 0;
 let lastTooltipHiddenAt = null;
 const TOOLTIP_SKIP_DELAY_WINDOW = 300;
-const ActionTooltip = ({ label, shortcut, delay, dismissOnClick, children }) => {
+const ActionTooltip = ({ label, shortcut, delay, dismissOnClick, side = 'top', triggerStyle, children, }) => {
     var _a, _b;
     const triggerRef = (0, react_1.useRef)(null);
     const tooltipRef = (0, react_1.useRef)(null);
@@ -119,14 +119,24 @@ const ActionTooltip = ({ label, shortcut, delay, dismissOnClick, children }) =>
         }
         const trigger = triggerRef.current.getBoundingClientRect();
         const tooltip = tooltipRef.current.getBoundingClientRect();
+        if (side === 'right') {
+            const right = trigger.right + 4;
+            setPosition({
+                left: right + tooltip.width <= window.innerWidth - 8
+                    ? right
+                    : Math.max(8, trigger.left - tooltip.width - 4),
+                top: Math.max(8, Math.min(trigger.top + (trigger.height - tooltip.height) / 2, window.innerHeight - tooltip.height - 8)),
+            });
+            return;
+        }
         const above = trigger.top - tooltip.height - 4;
         setPosition({
             left: Math.max(8, Math.min(trigger.left + (trigger.width - tooltip.width) / 2, window.innerWidth - tooltip.width - 8)),
             top: Math.max(8, Math.min(above >= 8 ? above : trigger.bottom + 4, window.innerHeight - tooltip.height - 8)),
         });
-    }, [label, shortcut, visible]);
+    }, [label, shortcut, side, visible]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("span", { ref: triggerRef, style: triggerStyle, onPointerEnter: onPointerEnter, onPointerLeave: hide, onPointerDownCapture: dismissOnClick ? hide : undefined, onClickCapture: dismissOnClick ? hide : undefined, onFocus: (event) => {
+            jsx_runtime_1.jsx("span", { ref: triggerRef, style: { ...defaultTriggerStyle, ...triggerStyle }, onPointerEnter: onPointerEnter, onPointerLeave: hide, onPointerDownCapture: dismissOnClick ? hide : undefined, onClickCapture: dismissOnClick ? hide : undefined, onFocus: (event) => {
                     if (event.currentTarget.contains(event.target)) {
                         show();
                     }

package/dist/components/AppLaunchButton.js

@@ -51,6 +51,7 @@ const AppLaunchButton = ({ actionButtonId, ariaLabel, children, disabled, menuAr
                     ? defaultMainSegmentStyle
                     : compactMainSegmentStyle,
                 title,
+                tooltipLabel: null,
                 type: 'action',
             },
             ...(items.length > 0
@@ -67,6 +68,7 @@ const AppLaunchButton = ({ actionButtonId, ariaLabel, children, disabled, menuAr
                         selectedId: null,
                         style: dropdownSegmentStyle,
                         title: menuAriaLabel,
+                        tooltipLabel: null,
                         type: 'menu',
                         values: items,
                     },

package/dist/components/AssetSelectorModal.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type AssetSelectionModalState } from '../state/modals';
+export declare const AssetSelectorModal: React.FC<{
+    readonly state: AssetSelectionModalState;
+    readonly readOnlyStudio: boolean;
+}>;

package/dist/components/AssetSelectorModal.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetSelectorModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const modals_1 = require("../state/modals");
+const Button_1 = require("./Button");
+const layout_1 = require("./layout");
+const ModalButton_1 = require("./ModalButton");
+const ModalContainer_1 = require("./ModalContainer");
+const ModalFooter_1 = require("./ModalFooter");
+const ModalHeader_1 = require("./ModalHeader");
+const RemInput_1 = require("./NewComposition/RemInput");
+const QuickSwitcherContent_1 = require("./QuickSwitcher/QuickSwitcherContent");
+const SegmentedControl_1 = require("./SegmentedControl");
+const panel = {
+    maxWidth: 'calc(100vw - 40px)',
+    overflow: 'hidden',
+    width: 400,
+};
+const sourceSelector = {
+    display: 'flex',
+    padding: '12px 16px 0',
+};
+const urlContent = {
+    boxSizing: 'border-box',
+    minHeight: 300,
+    padding: 16,
+};
+const compactUrlContent = {
+    boxSizing: 'border-box',
+    padding: 16,
+};
+const label = {
+    color: colors_1.LIGHT_TEXT,
+    display: 'block',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    marginBottom: 8,
+};
+const previewRow = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 16,
+    minHeight: 112,
+    paddingTop: 16,
+};
+const previewImage = {
+    display: 'block',
+    height: 96,
+    objectFit: 'contain',
+    width: 96,
+};
+const previewStatus = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: 1.5,
+};
+const footer = {
+    display: 'flex',
+    minWidth: 0,
+    width: '100%',
+};
+const isHttpUrl = (value) => {
+    try {
+        const { protocol } = new URL(value.startsWith('//') ? `https:${value}` : value);
+        return protocol === 'http:' || protocol === 'https:';
+    }
+    catch (_a) {
+        return false;
+    }
+};
+const AssetSelectorModal = ({ state, readOnlyStudio }) => {
+    var _a;
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const [mode, setMode] = (0, react_1.useState)(() => state.initialUrl === null ? 'project' : 'url');
+    const [draft, setDraft] = (0, react_1.useState)((_a = state.initialUrl) !== null && _a !== void 0 ? _a : '');
+    const [previewState, setPreviewState] = (0, react_1.useState)(() => state.assetType === 'image' && state.initialUrl !== null
+        ? { type: 'loading' }
+        : { type: 'empty' });
+    const close = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    (0, react_1.useEffect)(() => {
+        if (state.assetType !== 'image') {
+            setPreviewState({ type: 'empty' });
+            return;
+        }
+        const value = draft.trim();
+        if (value === '') {
+            setPreviewState({ type: 'empty' });
+            return;
+        }
+        if (!isHttpUrl(value)) {
+            setPreviewState({ type: 'invalid' });
+            return;
+        }
+        let cancelled = false;
+        const image = new Image();
+        setPreviewState({ type: 'loading' });
+        image.onload = () => {
+            if (!cancelled) {
+                setPreviewState({
+                    type: 'loaded',
+                    width: image.naturalWidth,
+                    height: image.naturalHeight,
+                });
+            }
+        };
+        image.onerror = () => {
+            if (!cancelled) {
+                setPreviewState({ type: 'error' });
+            }
+        };
+        image.src = value.startsWith('//') ? `https:${value}` : value;
+        return () => {
+            cancelled = true;
+            image.onload = null;
+            image.onerror = null;
+        };
+    }, [draft, state.assetType]);
+    const items = (0, react_1.useMemo)(() => [
+        {
+            key: 'project',
+            label: 'Project assets',
+            onClick: () => setMode('project'),
+            selected: mode === 'project',
+        },
+        {
+            key: 'url',
+            label: 'URL',
+            onClick: () => setMode('url'),
+            selected: mode === 'url',
+        },
+    ], [mode]);
+    const trimmedDraft = draft.trim();
+    const canApply = isHttpUrl(trimmedDraft);
+    const invalidDraft = trimmedDraft !== '' && !canApply;
+    const apply = (0, react_1.useCallback)(() => {
+        if (!canApply) {
+            return;
+        }
+        state.onSelectedUrl(trimmedDraft);
+        close();
+    }, [canApply, close, state, trimmedDraft]);
+    const onSubmit = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        apply();
+    }, [apply]);
+    const assetTypeLabel = state.assetType.charAt(0).toUpperCase() + state.assetType.slice(1);
+    return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onEscape: close, onOutsideClick: close, panelStyle: panel, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Replace ${state.assetType}`, onClose: close }), jsx_runtime_1.jsx("div", { style: sourceSelector, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: items, needsWrapping: false, size: "compact" }) }), mode === 'project' ? (jsx_runtime_1.jsx(QuickSwitcherContent_1.QuickSwitcherContent, { assetSelection: state.assetSelection, compositionSelection: null, initialMode: "assets", invocationTimestamp: state.invocationTimestamp, readOnlyStudio: readOnlyStudio })) : (jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
+                    jsx_runtime_1.jsxs("div", { style: state.assetType === 'image' ? urlContent : compactUrlContent, children: [
+                            jsx_runtime_1.jsxs("label", { htmlFor: "remotion-asset-url", style: label, children: [assetTypeLabel, " URL"] }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { id: "remotion-asset-url", autoFocus: true, onChange: (event) => setDraft(event.target.value), placeholder: `https://example.com/${state.assetType}`, rightAlign: false, status: invalidDraft ? 'error' : 'ok', type: "url", value: draft }), state.assetType === 'image' ? (jsx_runtime_1.jsxs("div", { style: previewRow, role: "status", children: [previewState.type === 'loaded' ? (jsx_runtime_1.jsx("img", { alt: "Image URL preview", src: trimmedDraft.startsWith('//')
+                                            ? `https:${trimmedDraft}`
+                                            : trimmedDraft, style: previewImage })) : null, jsx_runtime_1.jsx("div", { style: previewState.type === 'error'
+                                            ? { ...previewStatus, color: colors_1.FAIL_COLOR }
+                                            : previewStatus, children: previewState.type === 'empty'
+                                            ? 'Enter an image URL.'
+                                            : previewState.type === 'invalid'
+                                                ? 'Enter an HTTP(S) URL.'
+                                                : previewState.type === 'loading'
+                                                    ? 'Loading preview…'
+                                                    : previewState.type === 'error'
+                                                        ? 'Preview unavailable. You can still replace the source.'
+                                                        : `${previewState.width} × ${previewState.height}` })
+                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", flex: 1, justify: "flex-end", children: [
+                                jsx_runtime_1.jsx(Button_1.Button, { onClick: close, children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { disabled: !canApply, onClick: apply, children: ["Replace ", state.assetType] })
+                            ] }) })
+                ] }))] }));
+};
+exports.AssetSelectorModal = AssetSelectorModal;

package/dist/components/Canvas.js

@@ -155,6 +155,7 @@ const Canvas = ({ canvasContent, size }) => {
     const [pendingElementInstallRequests, setPendingElementInstallRequests] = (0, react_1.useState)([]);
     const [activeElementInstallRequest, setActiveElementInstallRequest] = (0, react_1.useState)(null);
     const lastFocusedAtRef = (0, react_1.useRef)(typeof document === 'undefined' || document.hasFocus() ? Date.now() : null);
+    const unsupportedDropNotifiedRef = (0, react_1.useRef)(false);
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
     const metadataRequestRef = (0, react_1.useRef)(0);
     const currentCompositionId = canvasContent.type === 'composition' ? canvasContent.compositionId : null;
@@ -843,10 +844,17 @@ const Canvas = ({ canvasContent, size }) => {
         var _a;
         var _b;
         if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
+            unsupportedDropNotifiedRef.current = false;
             setCompositionDropPreview(null);
             return;
         }
         const mayBeCanvasCapture = (0, drop_handler_data_1.isFileDragEvent)(event) && !window.remotion_isReadOnlyStudio;
+        const shouldNotifyAboutUnsupportedDrop = cannotAddSequence && !mayBeCanvasCapture;
+        if (shouldNotifyAboutUnsupportedDrop &&
+            !unsupportedDropNotifiedRef.current) {
+            (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
+        }
+        unsupportedDropNotifiedRef.current = shouldNotifyAboutUnsupportedDrop;
         if (!canDropAssets && !cannotAddSequence && !mayBeCanvasCapture) {
             setCompositionDropPreview(null);
             return;
@@ -939,14 +947,18 @@ const Canvas = ({ canvasContent, size }) => {
                 return;
             }
         }
+        unsupportedDropNotifiedRef.current = false;
         setCompositionDropPreview(null);
     }, []);
     const onDragEnd = (0, react_1.useCallback)(() => {
+        unsupportedDropNotifiedRef.current = false;
         setCompositionDropPreview(null);
     }, []);
     const onDrop = (0, react_1.useCallback)(async (event) => {
         var _a, _b;
         var _c, _d;
+        const unsupportedDropWasNotified = unsupportedDropNotifiedRef.current;
+        unsupportedDropNotifiedRef.current = false;
         setCompositionDropPreview(null);
         if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
             return;
@@ -975,7 +987,9 @@ const Canvas = ({ canvasContent, size }) => {
         if (cannotAddSequence) {
             event.preventDefault();
             event.stopPropagation();
-            (0, NotificationCenter_1.showNotification)('Cannot insert items into this composition component', 3000);
+            if (!unsupportedDropWasNotified) {
+                (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
+            }
             return;
         }
         if (!canDropAssets ||

package/dist/components/CheckboardToggle.js

@@ -9,6 +9,7 @@ const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-
 const checkerboard_1 = require("../state/checkerboard");
 const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
+const buttonStyle = { width: 26 };
 const CheckboardToggle = () => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const onClick = (0, react_1.useCallback)(() => {
@@ -20,7 +21,7 @@ const CheckboardToggle = () => {
     const ariaKeyShortcuts = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleCheckerboard');
     const accessibilityLabel = 'Show transparency as checkerboard';
     const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-pressed": checkerboard, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Checkerboard", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-pressed": checkerboard, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
                     jsx_runtime_1.jsx("path", { fill: checkerboard ? colors_1.BLUE : color, d: "M256 48h184c13.3 0 24 10.7 24 24v184H256V48zM48 256h208v208H72c-13.3 0-24-10.7-24-24V256z" }), jsx_runtime_1.jsx("rect", { x: "48", y: "48", width: "416", height: "416", rx: "24", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" }), jsx_runtime_1.jsx("path", { d: "M256 48v416M48 256h416", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" })
                 ] })) }) }));
 };

package/dist/components/ColorPicker/AlphaSlider.js

@@ -67,7 +67,7 @@ const AlphaSlider = ({ hue, saturation, value, alpha, onChange, onChangeComplete
                 updateFromEvent(ev.clientX, false);
             },
             onEnd: (reason, ev) => {
-                const shouldUseEndEvent = reason === 'pointerup' || reason === 'buttons-released';
+                const shouldUseEndEvent = (0, pointer_session_1.isPointerSessionRelease)(reason, ev);
                 updateFromEvent(shouldUseEndEvent && ev ? ev.clientX : lastClientX, true);
             },
         });

package/dist/components/ColorPicker/HueSlider.js

@@ -49,7 +49,7 @@ const HueSlider = ({ hue, onChange, onChangeComplete }) => {
                 updateFromEvent(ev.clientX, false);
             },
             onEnd: (reason, ev) => {
-                const shouldUseEndEvent = reason === 'pointerup' || reason === 'buttons-released';
+                const shouldUseEndEvent = (0, pointer_session_1.isPointerSessionRelease)(reason, ev);
                 updateFromEvent(shouldUseEndEvent && ev ? ev.clientX : lastClientX, true);
             },
         });

package/dist/components/ColorPicker/SaturationValueArea.js

@@ -63,7 +63,7 @@ const SaturationValueArea = ({ hue, saturation, value, onChange, onChangeComplet
                 updateFromEvent(ev.clientX, ev.clientY, false);
             },
             onEnd: (reason, ev) => {
-                const shouldUseEndEvent = reason === 'pointerup' || reason === 'buttons-released';
+                const shouldUseEndEvent = (0, pointer_session_1.isPointerSessionRelease)(reason, ev);
                 updateFromEvent(shouldUseEndEvent && ev ? ev.clientX : lastPosition.clientX, shouldUseEndEvent && ev ? ev.clientY : lastPosition.clientY, true);
             },
         });

package/dist/components/CompositionSelector.js

@@ -238,6 +238,7 @@ const CompositionSelector = () => {
                 dryRun: false,
                 signal: controller.signal,
                 symbolicatedStack: (0, composition_selector_drag_data_1.compositionSelectorDragDataToSymbolicatedStack)(dragData),
+                undoRedoNavigation: null,
             });
             if (result.success) {
                 notification.dismiss();

package/dist/components/CompositionSelectorItem.js

@@ -408,6 +408,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 dryRun: false,
                 signal: new AbortController().signal,
                 symbolicatedStack: (0, composition_selector_drag_data_1.compositionSelectorDragDataToSymbolicatedStack)(dragData),
+                undoRedoNavigation: null,
             });
             if (result.success) {
                 notification.dismiss();

package/dist/components/EditorGuides/Guide.js

@@ -128,7 +128,7 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
                 pointerDownPositionRef.current = null;
                 const shouldDeleteGuide = shouldDeleteGuideRef.current;
                 finishGuideInteraction();
-                if (shouldDeleteGuide || reason !== 'pointerup' || !endEvent) {
+                if (shouldDeleteGuide || !(0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     return;
                 }
                 if ((0, editor_guide_selection_1.isGuidePointerUpAClick)({

package/dist/components/ElementInstallConfirmation.js

@@ -10,12 +10,14 @@ const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint")
 const colors_1 = require("../helpers/colors");
 const hoverable_1 = require("../helpers/hoverable");
 const resolved_stack_to_symbolicated_1 = require("../helpers/resolved-stack-to-symbolicated");
+const url_state_1 = require("../helpers/url-state");
 const use_create_composition_1 = require("../helpers/use-create-composition");
 const validate_new_comp_data_1 = require("../helpers/validate-new-comp-data");
 const z_index_1 = require("../state/z-index");
 const Button_1 = require("./Button");
 const element_install_api_1 = require("./element-install-api");
 const import_assets_1 = require("./import-assets");
+const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const layout_1 = require("./layout");
 const LazySyntaxHighlightedSource_1 = require("./LazySyntaxHighlightedSource");
 const is_menu_item_1 = require("./Menu/is-menu-item");
@@ -27,7 +29,6 @@ const ModalHeader_1 = require("./ModalHeader");
 const NewComposition_1 = require("./NewComposition/NewComposition");
 const RemInput_1 = require("./NewComposition/RemInput");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const RadioButton_1 = require("./RadioButton");
 const SegmentedControl_1 = require("./SegmentedControl");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
@@ -254,6 +255,7 @@ const ElementInstallConfirmation = ({ state }) => {
     const sourcePreview = (0, react_1.useMemo)(() => makeSourceControlsVisible(request.element.sourceCode), [request.element.sourceCode]);
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const currentCompositionMetadata = config === null ||
         (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'composition' ||
         canvasContent.compositionId !== request.compositionId
@@ -369,7 +371,7 @@ const ElementInstallConfirmation = ({ state }) => {
             canceled = true;
         };
     }, [folderCompositionFile, newPlan, request.element, selectedFolderStack]);
-    const { compositionId: newCompositionId, createComposition, heightValidationMessage, nameValidationMessage, valid: newCompositionValuesAreValid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
+    const { codemod: newCompositionCodemod, compositionId: newCompositionId, heightValidationMessage, nameValidationMessage, valid: newCompositionValuesAreValid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
         canvasCapture: null,
         compositions,
         durationInFrames: newCompositionValues.durationInFrames,
@@ -426,9 +428,6 @@ const ElementInstallConfirmation = ({ state }) => {
     const activePlan = overwriteExisting
         ? existingDestination.plan
         : ((_f = preparedInstallation === null || preparedInstallation === void 0 ? void 0 : preparedInstallation.plan) !== null && _f !== void 0 ? _f : null);
-    const [createdComposition, setCreatedComposition] = (0, react_1.useState)(null);
-    const creationKey = JSON.stringify(newCompositionValues);
-    const compositionAlreadyCreated = createdComposition === creationKey;
     (0, react_1.useEffect)(() => {
         if (selectedPlan === null) {
             return;
@@ -521,7 +520,7 @@ const ElementInstallConfirmation = ({ state }) => {
                     : requestedName !== null))) &&
         (mode === 'current-composition'
             ? currentPlan !== null
-            : (newCompositionValuesAreValid || compositionAlreadyCreated) &&
+            : newCompositionValuesAreValid &&
                 folderTargetIsReady &&
                 selectedNewCompositionPlan !== null);
     const submit = (0, react_1.useCallback)(async () => {
@@ -530,18 +529,6 @@ const ElementInstallConfirmation = ({ state }) => {
             return;
         }
         setSubmitting(true);
-        if (mode === 'new-composition' && !compositionAlreadyCreated) {
-            const created = await createComposition({
-                signal: new AbortController().signal,
-                symbolicatedStack: selectedFolderStack === null ? null : folderSymbolicatedStack,
-            });
-            if (!created.success) {
-                (0, NotificationCenter_1.showNotification)(`Could not create composition: ${created.reason}`, 4000);
-                setSubmitting(false);
-                return;
-            }
-            setCreatedComposition(creationKey);
-        }
         const installed = await (0, import_assets_1.insertElement)({
             installationName: overwriteExisting
                 ? ((_a = existingDestination === null || existingDestination === void 0 ? void 0 : existingDestination.name) !== null && _a !== void 0 ? _a : installationName)
@@ -556,9 +543,29 @@ const ElementInstallConfirmation = ({ state }) => {
             from: mode === 'new-composition' ? null : request.from,
             overwriteExisting,
             position: mode === 'new-composition' ? null : request.position,
+            undoRedoNavigation: mode === 'new-composition'
+                ? {
+                    undoRoute: (0, url_state_1.getRoute)(),
+                    redoRoute: `/${newCompositionId}`,
+                }
+                : null,
+            newComposition: mode === 'new-composition'
+                ? {
+                    codemod: newCompositionCodemod,
+                    symbolicatedStack: selectedFolderStack === null ? null : folderSymbolicatedStack,
+                }
+                : null,
         });
-        if (installed)
+        if (installed) {
+            if (mode === 'new-composition') {
+                selectComposition({
+                    id: newCompositionId,
+                    folderName: newCompositionValues.folder.folderName,
+                    parentFolderName: newCompositionValues.folder.parentName,
+                }, true);
+            }
             onClose();
+        }
         else {
             setSubmitting(false);
             setRefreshPlan((value) => value + 1);
@@ -566,19 +573,20 @@ const ElementInstallConfirmation = ({ state }) => {
     }, [
         activePlan,
         existingDestination,
-        compositionAlreadyCreated,
-        creationKey,
         installationName,
         overwriteExisting,
         canSubmit,
-        createComposition,
         folderSymbolicatedStack,
         mode,
+        newCompositionCodemod,
         newCompositionId,
         onClose,
         request,
         selectedFolderStack,
         selectedPlan,
+        selectComposition,
+        newCompositionValues.folder.folderName,
+        newCompositionValues.folder.parentName,
     ]);
     const cancel = (0, react_1.useCallback)(() => {
         if (!submitting) {
@@ -623,7 +631,7 @@ const ElementInstallConfirmation = ({ state }) => {
                                 ] }), currentPlan === null ? (jsx_runtime_1.jsxs("div", { style: warningStyle, role: "status", children: [
                                     jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsxs("p", { style: warningDescriptionStyle, children: ["Studio could not find a safe place in \u201C", request.compositionId, "\u201D to insert the Element. Install it into a new composition instead."] })
                                 ] })) : null, mode === 'new-composition' ? (jsx_runtime_1.jsxs("section", { style: { ...sectionStyle, marginInline: -16 }, "aria-label": "New composition settings", children: [
-                                    jsx_runtime_1.jsx(NewComposition_1.NewCompositionFields, { compositionId: newCompositionId, heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: compositionAlreadyCreated ? null : nameValidationMessage, setValues: setNewCompositionValues, values: newCompositionValues, widthValidationMessage: widthValidationMessage }), (activeNewCompositionPlanState === null || activeNewCompositionPlanState === void 0 ? void 0 : activeNewCompositionPlanState.type) === 'error' ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: activeNewCompositionPlanState.reason, type: "error" })) : null] })) : null, jsx_runtime_1.jsx("section", { style: sectionStyle, "aria-label": "Element implementation", children: existingDestination ? (jsx_runtime_1.jsxs("div", { role: "radiogroup", "aria-label": "Existing Element file", style: sectionStyle, children: [
+                                    jsx_runtime_1.jsx(NewComposition_1.NewCompositionFields, { compositionId: newCompositionId, heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: nameValidationMessage, setValues: setNewCompositionValues, values: newCompositionValues, widthValidationMessage: widthValidationMessage }), (activeNewCompositionPlanState === null || activeNewCompositionPlanState === void 0 ? void 0 : activeNewCompositionPlanState.type) === 'error' ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: activeNewCompositionPlanState.reason, type: "error" })) : null] })) : null, jsx_runtime_1.jsx("section", { style: sectionStyle, "aria-label": "Element implementation", children: existingDestination ? (jsx_runtime_1.jsxs("div", { role: "radiogroup", "aria-label": "Existing Element file", style: sectionStyle, children: [
                                         jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: !overwriteExisting, disabled: submitting, onClick: () => setInput((previous) => ({ ...previous, overwritePlan: null })), children: "Create a copy" }), !overwriteExisting ? (jsx_runtime_1.jsxs("div", { style: {
                                                 ...sectionStyle,
                                                 paddingLeft: 28,

package/dist/components/FullscreenToggle.js

@@ -42,6 +42,6 @@ const FullScreenToggle = ({ hidden }) => {
             f.unregister();
         };
     }, [keybindings, onClick]);
-    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: { width: 18, height: 18 } })) }) }));
+    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Fullscreen", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: { width: 18, height: 18 } })) }) }));
 };
 exports.FullScreenToggle = FullScreenToggle;

package/dist/components/GlobalKeybindings.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const pick_color_1 = require("../helpers/pick-color");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const use_keybinding_1 = require("../helpers/use-keybinding");
@@ -184,6 +185,18 @@ const GlobalKeybindings = () => {
                 preventDefault: true,
             })
             : null;
+        const colorPicker = 'EyeDropper' in window
+            ? keybindings.registerKeybinding({
+                event: 'keydown',
+                action: 'pickColor',
+                callback: () => {
+                    (0, pick_color_1.pickColor)();
+                },
+                triggerIfInputFieldFocused: false,
+                keepRegisteredWhenNotHighestContext: false,
+                preventDefault: true,
+            })
+            : null;
         const sequencePropKeys = sequencePropShortcuts.map(({ action, fieldKey }) => keybindings.registerKeybinding({
             event: 'keydown',
             action,
@@ -274,6 +287,7 @@ const GlobalKeybindings = () => {
             cmdKKey.unregister();
             cmdSKey.unregister();
             cmdIKey === null || cmdIKey === void 0 ? void 0 : cmdIKey.unregister();
+            colorPicker === null || colorPicker === void 0 ? void 0 : colorPicker.unregister();
             pageDown.unregister();
             pageUp.unregister();
             shiftMKey.unregister();

package/dist/components/InspectorLocationCopy.js

@@ -69,6 +69,6 @@ const InspectorLocationCopy = ({ children, location, name, openInEditorLocation
                     opacity: showAction ? 1 : 0,
                     pointerEvents: showAction ? 'auto' : 'none',
                 }, children: [
-                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, contextForAgents: contextForAgents, location: openInEditorLocation }), contextForAgents ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy context for agents" })) : null] })) : null] }));
+                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, contextForAgents: contextForAgents, location: openInEditorLocation, showTooltips: false }), contextForAgents ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy context for agents" })) : null] })) : null] }));
 };
 exports.InspectorLocationCopy = InspectorLocationCopy;

package/dist/components/InspectorOpenInEditor.d.ts

@@ -5,4 +5,5 @@ export declare const InspectorOpenInEditor: React.FC<{
     readonly location: OriginalPosition | null;
     readonly label?: React.ReactNode;
     readonly locationType: 'file' | 'folder' | null;
+    readonly showTooltips: boolean;
 }>;