@remotion/studio 4.0.498 → 4.0.500

package/dist/components/SidebarCollapserControls.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarCollapserControls = void 0;
+exports.SidebarCollapserControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
@@ -18,7 +18,7 @@ const style = {
     color: colors_1.CURRENT_COLOR,
     position: 'relative',
 };
-const SidebarCollapserControls = () => {
+const SidebarCollapserControl = ({ side }) => {
     const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const leftSidebarStatus = (0, TopPanel_1.useResponsiveSidebarStatus)();
@@ -83,15 +83,30 @@ const SidebarCollapserControls = () => {
         toggleRight,
     ]);
     (0, react_1.useEffect)(() => {
-        const left = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'b',
-            commandCtrlKey: true,
-            callback: toggleLeft,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
+        if (side === 'left') {
+            const left = keybindings.registerKeybinding({
+                event: 'keydown',
+                key: 'b',
+                commandCtrlKey: true,
+                callback: toggleLeft,
+                preventDefault: true,
+                triggerIfInputFieldFocused: false,
+                keepRegisteredWhenNotHighestContext: false,
+            });
+            const zen = keybindings.registerKeybinding({
+                event: 'keydown',
+                key: 'g',
+                commandCtrlKey: true,
+                callback: toggleBoth,
+                preventDefault: true,
+                triggerIfInputFieldFocused: false,
+                keepRegisteredWhenNotHighestContext: false,
+            });
+            return () => {
+                left.unregister();
+                zen.unregister();
+            };
+        }
         const right = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'j',
@@ -101,21 +116,10 @@ const SidebarCollapserControls = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
-        const zen = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'g',
-            commandCtrlKey: true,
-            callback: toggleBoth,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
         return () => {
-            left.unregister();
             right.unregister();
-            zen.unregister();
         };
-    }, [keybindings, toggleBoth, toggleLeft, toggleRight]);
+    }, [keybindings, side, toggleBoth, toggleLeft, toggleRight]);
     const toggleLeftTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
         ? 'Toggle Left Sidebar'
         : `Toggle Left Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+B)`;
@@ -129,13 +133,14 @@ const SidebarCollapserControls = () => {
         };
     }, []);
     const toggleLeftAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx("div", { style: colorStyle(color), title: toggleLeftTooltip, children: jsx_runtime_1.jsx("div", { style: leftIcon(color) }) }));
+        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "left", style: colorStyle(color), title: toggleLeftTooltip, children: jsx_runtime_1.jsx("div", { style: leftIcon(color) }) }));
     }, [colorStyle, leftIcon, toggleLeftTooltip]);
     const toggleRightAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx("div", { style: colorStyle(color), title: toggleRightTooltip, children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
+        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "right", style: colorStyle(color), title: toggleRightTooltip, children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
     }, [colorStyle, rightIcon, toggleRightTooltip]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction })
-        ] }));
+    if (side === 'left') {
+        return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
+    }
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
 };
-exports.SidebarCollapserControls = SidebarCollapserControls;
+exports.SidebarCollapserControl = SidebarCollapserControl;

package/dist/components/SnappingToggle.d.ts

@@ -1,4 +1,2 @@
 import React from 'react';
-export declare const SnappingToggle: React.FC<{
-    readonly disabled: boolean;
-}>;
+export declare const SnappingToggle: React.FC;

package/dist/components/SnappingToggle.js

@@ -9,7 +9,7 @@ const use_keybinding_1 = require("../helpers/use-keybinding");
 const magnet_1 = require("../icons/magnet");
 const editor_snapping_1 = require("../state/editor-snapping");
 const ControlButton_1 = require("./ControlButton");
-const SnappingToggle = ({ disabled }) => {
+const SnappingToggle = () => {
     const { editorSnapping, setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const onClick = (0, react_1.useCallback)(() => {
         setEditorSnapping((current) => !current);
@@ -21,6 +21,6 @@ const SnappingToggle = ({ disabled }) => {
     ]
         .filter(no_react_1.NoReactInternals.truthy)
         .join(' ');
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", disabled: disabled, onClick: onClick, children: jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 17, height: 17 }, fill: color, "aria-hidden": "true", focusable: "false" }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", onClick: onClick, children: jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 17, height: 17 }, fill: color, "aria-hidden": "true", focusable: "false" }) }));
 };
 exports.SnappingToggle = SnappingToggle;

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

@@ -5,6 +5,8 @@ export declare const SplitterContainer: React.FC<{
     readonly orientation: SplitterOrientation;
     readonly maxFlex: number;
     readonly minFlex: number;
+    readonly maxFlexerSize: number | null;
+    readonly maxAntiFlexerSize: number | null;
     readonly id: string;
     readonly defaultFlex: number;
     readonly children: React.ReactNode;

package/dist/components/Splitter/SplitterContainer.js

@@ -19,7 +19,7 @@ exports.containerColumn = {
     flex: 1,
     height: 0,
 };
-const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
+const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, maxFlexerSize, maxAntiFlexerSize, id, }) => {
     const [initialTimelineFlex, persistFlex] = (0, timeline_1.useTimelineFlex)(id);
     const [flexValue, setFlexValue] = (0, react_1.useState)(initialTimelineFlex !== null && initialTimelineFlex !== void 0 ? initialTimelineFlex : defaultFlex);
     const ref = (0, react_1.useRef)(null);
@@ -34,6 +34,8 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
             id,
             maxFlex,
             minFlex,
+            maxFlexerSize,
+            maxAntiFlexerSize,
             defaultFlex,
             persistFlex,
         };
@@ -42,6 +44,8 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         flexValue,
         id,
         maxFlex,
+        maxFlexerSize,
+        maxAntiFlexerSize,
         minFlex,
         orientation,
         persistFlex,

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

@@ -11,6 +11,8 @@ export type TSplitterContext = {
     ref: React.RefObject<HTMLDivElement | null>;
     maxFlex: number;
     minFlex: number;
+    maxFlexerSize: number | null;
+    maxAntiFlexerSize: number | null;
     defaultFlex: number;
     id: string;
     persistFlex: (value: number) => void;

package/dist/components/Splitter/SplitterContext.js

@@ -13,6 +13,8 @@ exports.SplitterContext = react_1.default.createContext({
     orientation: 'horizontal',
     maxFlex: 1,
     minFlex: 1,
+    maxFlexerSize: null,
+    maxAntiFlexerSize: null,
     defaultFlex: 1,
     id: '--',
     persistFlex: () => undefined,

package/dist/components/Splitter/SplitterElement.js

@@ -8,6 +8,7 @@ const colors_1 = require("../../helpers/colors");
 const SplitterContext_1 = require("./SplitterContext");
 const SplitterElement = ({ children, type, sticky }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
+    const maxSize = type === 'flexer' ? context.maxFlexerSize : context.maxAntiFlexerSize;
     const style = (0, react_1.useMemo)(() => {
         return {
             flex: 
@@ -17,8 +18,12 @@ const SplitterElement = ({ children, type, sticky }) => {
             position: 'relative',
             overflow: 'hidden',
             flexDirection: 'column',
+            maxWidth: context.orientation === 'vertical' ? (maxSize !== null && maxSize !== void 0 ? maxSize : undefined) : undefined,
+            maxHeight: context.orientation === 'horizontal'
+                ? (maxSize !== null && maxSize !== void 0 ? maxSize : undefined)
+                : undefined,
         };
-    }, [context.flexValue, type]);
+    }, [context.flexValue, context.orientation, maxSize, type]);
     const stickStyle = (0, react_1.useMemo)(() => {
         return {
             position: 'absolute',

package/dist/components/Splitter/SplitterHandle.js

@@ -31,6 +31,8 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
         // Cleanup for the listeners that only exist for the duration of a drag.
         let endDrag = null;
         const onPointerDown = (e) => {
+            var _a;
+            var _b;
             if (e.button !== 0) {
                 return;
             }
@@ -40,7 +42,20 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             // value updates on every pointermove, so it must not be re-read live.
             const dragContext = latest.current.context;
             const start = { x: e.clientX, y: e.clientY };
-            const startFlex = dragContext.flexValue;
+            const { width: containerWidth, height: containerHeight } = (_b = (_a = dragContext.ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : {
+                width: 0,
+                height: 0,
+            };
+            const availableSize = (dragContext.orientation === 'vertical'
+                ? containerWidth
+                : containerHeight) - exports.SPLITTER_HANDLE_SIZE;
+            const minFlex = dragContext.maxAntiFlexerSize === null || availableSize <= 0
+                ? dragContext.minFlex
+                : Math.max(dragContext.minFlex, 1 - dragContext.maxAntiFlexerSize / availableSize);
+            const maxFlex = dragContext.maxFlexerSize === null || availableSize <= 0
+                ? dragContext.maxFlex
+                : Math.min(dragContext.maxFlex, dragContext.maxFlexerSize / availableSize);
+            const startFlex = Math.min(maxFlex, Math.max(minFlex, dragContext.flexValue));
             dragContext.isDragging.current = start;
             (0, ForceSpecificCursor_1.forceSpecificCursor)(dragContext.orientation === 'horizontal' ? 'row-resize' : 'col-resize');
             current.classList.add('remotion-splitter-active');
@@ -54,7 +69,7 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                     : (ev.clientY - start.y) / (height - exports.SPLITTER_HANDLE_SIZE);
                 const newFlex = startFlex + change;
                 if (clamp) {
-                    return Math.min(dragContext.maxFlex, Math.max(dragContext.minFlex, newFlex));
+                    return Math.min(maxFlex, Math.max(minFlex, newFlex));
                 }
                 return newFlex;
             };
@@ -64,6 +79,8 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                 current.classList.remove('remotion-splitter-active');
                 window.removeEventListener('pointermove', onPointerMove);
                 window.removeEventListener('pointerup', onPointerUp);
+                window.removeEventListener('pointercancel', onPointerCancel);
+                window.removeEventListener('blur', onWindowBlur);
                 endDrag = null;
                 player_1.PlayerInternals.updateAllElementsSizes();
             };
@@ -95,8 +112,16 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                 dragContext.persistFlex(getNewValue(ev, true));
                 endDrag === null || endDrag === void 0 ? void 0 : endDrag();
             };
+            const onPointerCancel = () => {
+                endDrag === null || endDrag === void 0 ? void 0 : endDrag();
+            };
+            const onWindowBlur = () => {
+                endDrag === null || endDrag === void 0 ? void 0 : endDrag();
+            };
             window.addEventListener('pointermove', onPointerMove);
             window.addEventListener('pointerup', onPointerUp);
+            window.addEventListener('pointercancel', onPointerCancel);
+            window.addEventListener('blur', onWindowBlur);
         };
         current.addEventListener('pointerdown', onPointerDown);
         return () => {

package/dist/components/Timeline/Timeline.js

@@ -253,7 +253,7 @@ const TimelineInner = () => {
                 }
                 return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
             }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
-                                    jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
+                                    jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, maxFlexerSize: null, maxAntiFlexerSize: null, children: [
                                             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
                                                         jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null, jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
                                                     ] }) })

package/dist/components/Timeline/TimelineAssetField.d.ts

@@ -1,6 +1,15 @@
 import React from 'react';
 import type { CanUpdateSequencePropStatusStatic } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+import { type InspectorInlineActionProps } from '../InspectorPanel/common';
+export type InspectorSourceAction = Omit<InspectorInlineActionProps, 'variant'>;
+type AssetSelectionContextValue = {
+    readonly initialQuery: string;
+    readonly getSourceAction: (src: string) => InspectorSourceAction | null;
+    readonly sourceAction: InspectorSourceAction | null;
+};
+export declare const AssetSelectionContext: React.Context<AssetSelectionContextValue>;
+export declare const toFileToken: (name: string) => string;
 type TimelineAssetFieldProps = {
     readonly field: SchemaFieldInfo;
     readonly propStatus: CanUpdateSequencePropStatusStatic;
@@ -9,6 +18,5 @@ type TimelineAssetFieldProps = {
     readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;
 };
-export declare const isStaticFileAssetValue: (value: unknown) => value is string;
 export declare const TimelineAssetField: React.FC<TimelineAssetFieldProps>;
 export {};

package/dist/components/Timeline/TimelineAssetField.js

@@ -1,45 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineAssetField = exports.isStaticFileAssetValue = void 0;
+exports.TimelineAssetField = exports.toFileToken = exports.AssetSelectionContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
-const write_static_file_1 = require("../../api/write-static-file");
-const Checkmark_1 = require("../../icons/Checkmark");
-const import_assets_1 = require("../import-assets");
-const ComboBox_1 = require("../NewComposition/ComboBox");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const use_static_files_1 = require("../use-static-files");
-const comboboxStyle = {
-    marginLeft: 8,
-    maxWidth: 180,
-};
-const remoteAssetStyle = {
-    display: 'inline-block',
-    marginLeft: 8,
-    maxWidth: 180,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    verticalAlign: 'middle',
-    whiteSpace: 'nowrap',
+const pen_1 = require("../../icons/pen");
+const modals_1 = require("../../state/modals");
+const InlineAction_1 = require("../InlineAction");
+const common_1 = require("../InspectorPanel/common");
+const penIcon = {
+    display: 'block',
+    height: 14,
+    width: 14,
 };
+exports.AssetSelectionContext = (0, react_1.createContext)({
+    getSourceAction: () => null,
+    initialQuery: '',
+    sourceAction: null,
+});
 const toFileToken = (name) => {
     return `${no_react_1.NoReactInternals.FILE_TOKEN}${name
         .split('/')
         .map(encodeURIComponent)
         .join('/')}`;
 };
-const toStaticFileUrl = (fileToken) => {
-    return `${window.remotion_staticBase}/${fileToken.slice(no_react_1.NoReactInternals.FILE_TOKEN.length)}`;
-};
-const isStaticFileAssetValue = (value) => {
-    return (typeof value === 'string' && value.startsWith(no_react_1.NoReactInternals.FILE_TOKEN));
-};
-exports.isStaticFileAssetValue = isStaticFileAssetValue;
-const TimelineStaticFileAssetField = ({ propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
-    const staticFiles = (0, use_static_files_1.useStaticFiles)();
-    const current = String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '');
-    const onSelect = (0, react_1.useCallback)((sourceValue, previewValue) => {
+exports.toFileToken = toFileToken;
+const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
+    if (field.fieldSchema.type !== 'asset') {
+        throw new Error('TimelineAssetField rendered for non-asset field');
+    }
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { getSourceAction, initialQuery, sourceAction } = (0, react_1.useContext)(exports.AssetSelectionContext);
+    const inlineSourceAction = (0, react_1.useMemo)(() => {
+        if (field.key !== 'src') {
+            return null;
+        }
+        return typeof effectiveValue === 'string'
+            ? getSourceAction(effectiveValue)
+            : sourceAction;
+    }, [effectiveValue, field.key, getSourceAction, sourceAction]);
+    const onSelect = (0, react_1.useCallback)((assetName, previewValue) => {
+        const sourceValue = (0, exports.toFileToken)(assetName);
         if (sourceValue === propStatus.codeValue) {
             return;
         }
@@ -48,78 +49,29 @@ const TimelineStaticFileAssetField = ({ propStatus, effectiveValue, onSave, onDr
             onDragEnd();
         });
     }, [propStatus.codeValue, onDragValueChange, onSave, onDragEnd]);
-    const upload = (0, react_1.useCallback)(async () => {
-        const [file] = await (0, import_assets_1.pickFilesToImport)({ multiple: false });
-        if (!file) {
-            return;
-        }
-        const existing = staticFiles.find((candidate) => candidate.name === file.name);
-        if (existing && existing.sizeInBytes !== file.size) {
-            (0, NotificationCenter_1.showNotification)(`File with name ${file.name} already exists and is different`, 4000);
-            return;
-        }
-        try {
-            if (!existing) {
-                await (0, write_static_file_1.writeStaticFile)({
-                    contents: await file.arrayBuffer(),
-                    filePath: file.name,
-                });
-            }
-            const fileToken = toFileToken(file.name);
-            onSelect(fileToken, toStaticFileUrl(fileToken));
-            if (!existing) {
-                (0, NotificationCenter_1.showNotification)(`Created ${file.name} in public folder`, 3000);
-            }
-        }
-        catch (error) {
-            (0, NotificationCenter_1.showNotification)(`Could not upload asset: ${error instanceof Error ? error.message : String(error)}`, 4000);
-        }
-    }, [onSelect, staticFiles]);
-    const items = (0, react_1.useMemo)(() => {
-        const publicFileItems = staticFiles.map((file) => {
-            const fileToken = toFileToken(file.name);
-            return {
-                type: 'item',
-                id: fileToken,
-                value: fileToken,
-                label: file.name,
-                onClick: () => onSelect(fileToken, file.src),
-                keyHint: null,
-                leftItem: fileToken === current ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-                subMenu: null,
-                quickSwitcherLabel: null,
-            };
+    const openAssetSelection = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'quick-switcher',
+            mode: 'assets',
+            invocationTimestamp: Date.now(),
+            assetSelection: {
+                initialQuery,
+                onSelected: (asset) => onSelect(asset.name, asset.src),
+            },
         });
-        return [
-            ...publicFileItems,
-            { type: 'divider', id: 'upload-asset-divider' },
-            {
-                type: 'item',
-                id: 'upload-asset',
-                value: 'upload-asset',
-                label: 'Upload…',
-                onClick: () => {
-                    upload().catch(() => undefined);
-                },
-                keyHint: null,
-                leftItem: null,
-                subMenu: null,
-                quickSwitcherLabel: null,
+    }, [initialQuery, onSelect, setSelectedModal]);
+    const action = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openAssetSelection, disabled: window.remotion_isReadOnlyStudio, title: "Change source", renderAction: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }) }));
+    if (inlineSourceAction === null) {
+        return action;
+    }
+    return (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { ...inlineSourceAction, size: "compact", variant: {
+            type: 'segmented',
+            trailing: {
                 disabled: window.remotion_isReadOnlyStudio,
+                onClick: openAssetSelection,
+                renderIcon: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }),
+                title: 'Change source',
             },
-        ];
-    }, [current, onSelect, staticFiles, upload]);
-    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", title: current, selectedId: current, values: items, style: comboboxStyle }));
-};
-const TimelineAssetField = (props) => {
-    var _a;
-    if (props.field.fieldSchema.type !== 'asset') {
-        throw new Error('TimelineAssetField rendered for non-asset field');
-    }
-    if (!(0, exports.isStaticFileAssetValue)(props.effectiveValue)) {
-        const remote = String((_a = props.effectiveValue) !== null && _a !== void 0 ? _a : '');
-        return (jsx_runtime_1.jsx("span", { style: remoteAssetStyle, title: remote, children: remote }));
-    }
-    return jsx_runtime_1.jsx(TimelineStaticFileAssetField, { ...props });
+        } }));
 };
 exports.TimelineAssetField = TimelineAssetField;

package/dist/components/Timeline/TimelineClipboardKeybindings.d.ts

@@ -14,16 +14,19 @@ export type PasteEffectsTarget = {
 } | {
     readonly type: 'unsupported';
 };
-export type PasteEffectPropTarget = {
-    readonly type: 'valid';
+type PasteEffectPropEditTarget = {
     readonly fileName: string;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly effectIndex: number;
     readonly fieldKey: string;
     readonly defaultValue: string | null;
     readonly schema: InteractivitySchema;
+};
+export type PasteEffectPropTarget = {
+    readonly type: 'valid';
+    readonly targets: PasteEffectPropEditTarget[];
 } | {
-    readonly type: 'none' | 'multiple' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
+    readonly type: 'none' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
 };
 export declare const getPasteEffectsTarget: (selectedItems: readonly TimelineSelection[]) => PasteEffectsTarget;
 export declare const getSnapshotsFromSelection: ({ selection, propStatuses, }: {
@@ -72,3 +75,4 @@ export declare const getPasteEffectPropTarget: ({ selectedItems, payload, propSt
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
 }) => PasteEffectPropTarget;
 export declare const TimelineClipboardKeybindings: React.FC;
+export {};