@remotion/studio 4.0.522 → 4.0.524

package/dist/components/FixComputedValueModal.js

@@ -7,8 +7,10 @@ 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 copy_1 = require("../icons/copy");
+const skills_1 = require("../icons/skills");
 const CodingAgentButton_1 = require("./CodingAgentButton");
 const InlineAction_1 = require("./InlineAction");
+const ModalContainer_1 = require("./ModalContainer");
 const ModalFooter_1 = require("./ModalFooter");
 const ModalHeader_1 = require("./ModalHeader");
 const DismissableModal_1 = require("./NewComposition/DismissableModal");
@@ -16,10 +18,17 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const SettingsContext_1 = require("./SettingsContext");
 const panelStyle = {
     borderRadius: 6,
+    display: 'flex',
+    flexDirection: 'column',
+    width: (0, ModalContainer_1.getMaxModalWidth)(560),
+    maxHeight: (0, ModalContainer_1.getMaxModalHeight)(800),
+    minWidth: 0,
     overflow: 'hidden',
 };
 const container = {
-    padding: '12px 16px 18px',
+    padding: 16,
+    minHeight: 0,
+    overflowY: 'auto',
 };
 const text = {
     color: colors_1.LIGHT_TEXT,
@@ -28,11 +37,12 @@ const text = {
     lineHeight: 1.5,
 };
 const commandField = {
-    alignItems: 'center',
-    background: colors_1.SELECTED_BACKGROUND,
+    alignItems: 'flex-start',
+    background: colors_1.BLACK_ALPHA_30,
     borderRadius: 6,
     boxSizing: 'border-box',
     display: 'flex',
+    gap: 8,
     marginTop: 10,
     padding: '8px 8px 8px 10px',
     width: '100%',
@@ -41,13 +51,23 @@ const code = {
     color: colors_1.WHITE,
     flex: 1,
     fontFamily: 'monospace',
-    fontSize: 14,
+    fontSize: 13,
     lineHeight: 1.5,
     margin: 0,
     minWidth: 0,
-    overflowX: 'auto',
+    overflowWrap: 'anywhere',
     whiteSpace: 'pre-wrap',
 };
+const copyAction = {
+    flexShrink: 0,
+};
+const skillsIcon = {
+    display: 'inline-block',
+    height: 18,
+    width: 18,
+    marginRight: 6,
+    verticalAlign: 'middle',
+};
 const copyIcon = {
     flexShrink: 0,
     height: 12,
@@ -56,12 +76,16 @@ const copyIcon = {
 const footer = {
     display: 'flex',
     flex: 'none',
+    minWidth: 0,
+    padding: '12px 16px',
     justifyContent: 'flex-end',
 };
 const FixComputedValueModal = ({ state }) => {
     var _a;
     const { codingAgentInfo } = (0, SettingsContext_1.useSettings)();
-    const prompt = `/remotion-interactivity ${state.context} make "${state.prop}" interactive`;
+    const skillName = '/remotion-interactivity';
+    const promptDetails = ` ${state.context} make "${state.prop}" interactive`;
+    const prompt = `${skillName}${promptDetails}`;
     const installCommand = 'npx remotion skills add';
     const hasCodingAgent = ((_a = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.length) !== null && _a !== void 0 ? _a : 0) > 0;
     const { copied: promptCopied, markCopied: markPromptCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
@@ -89,7 +113,7 @@ const FixComputedValueModal = ({ state }) => {
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Fix computed value" }), jsx_runtime_1.jsxs("div", { style: container, children: [state.remotionInteractivitySkillAvailable ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx("div", { style: text, children: "First, install the Remotion Agent Skills:" }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
-                                    jsx_runtime_1.jsx("pre", { style: code, children: installCommand }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopyInstallCommand, renderAction: renderInstallCommandCopyAction, title: "Copy command" })
+                                    jsx_runtime_1.jsx("pre", { style: code, children: installCommand }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { style: copyAction, variant: null, onClick: onCopyInstallCommand, renderAction: renderInstallCommandCopyAction, title: "Copy command" })
                                 ] })
                         ] })), jsx_runtime_1.jsx("div", { style: {
                             ...text,
@@ -97,7 +121,13 @@ const FixComputedValueModal = ({ state }) => {
                         }, children: state.remotionInteractivitySkillAvailable
                             ? 'Paste this prompt into your coding agent to make this value editable in Studio:'
                             : 'Then, paste this prompt into your coding agent:' }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
-                            jsx_runtime_1.jsx("pre", { style: code, children: prompt }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopyPrompt, renderAction: renderPromptCopyAction, title: "Copy prompt" })
+                            jsx_runtime_1.jsxs("pre", { style: code, children: [
+                                    jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: colors_1.BLUE, style: skillsIcon, "aria-hidden": true }), jsx_runtime_1.jsx("span", { style: {
+                                            color: colors_1.BLUE,
+                                            fontFamily: 'inherit',
+                                            fontSize: 'inherit',
+                                            lineHeight: 'inherit',
+                                        }, children: skillName }), promptDetails] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { style: copyAction, variant: null, onClick: onCopyPrompt, renderAction: renderPromptCopyAction, title: "Copy prompt" })
                         ] })
                 ] }), hasCodingAgent ? (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsx(CodingAgentButton_1.CodingAgentButton, { label: "Open in", prompt: prompt, size: "compact", style: null }) })) : null] }));
 };

package/dist/components/FullscreenToggle.js

@@ -4,17 +4,12 @@ exports.FullScreenToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const no_react_1 = require("remotion/no-react");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const fullscreen_1 = require("../icons/fullscreen");
 const canvas_ref_1 = require("../state/canvas-ref");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
-const accessibilityLabel = [
-    'Enter fullscreen preview',
-    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(F)',
-]
-    .filter(no_react_1.NoReactInternals.truthy)
-    .join(' ');
 const FullScreenToggle = ({ hidden }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { setSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
@@ -30,12 +25,15 @@ const FullScreenToggle = ({ hidden }) => {
                 },
             }));
     }, [setSize]);
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('enterFullscreen');
+    const ariaKeyShortcuts = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('enterFullscreen');
+    const accessibilityLabel = 'Enter fullscreen preview';
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     (0, react_1.useEffect)(() => {
         const f = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'f',
+            action: 'enterFullscreen',
             callback: onClick,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
@@ -44,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(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: accessibilityLabel, "aria-label": accessibilityLabel, 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: 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 } })) }) }));
 };
 exports.FullScreenToggle = FullScreenToggle;

package/dist/components/GlobalKeybindings.js

@@ -4,10 +4,14 @@ exports.GlobalKeybindings = void 0;
 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 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");
 const checkerboard_1 = require("../state/checkerboard");
+const editor_guides_1 = require("../state/editor-guides");
+const editor_outlines_1 = require("../state/editor-outlines");
+const editor_rulers_1 = require("../state/editor-rulers");
 const editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
@@ -15,18 +19,71 @@ const CompositionSelector_1 = require("./CompositionSelector");
 const ExplorerPanelRef_1 = require("./ExplorerPanelRef");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
-const sequencePropShortcuts = {
-    p: 'style.translate',
-    r: 'style.rotate',
-    s: 'style.scale',
-    t: 'style.opacity',
-};
+const sequencePropShortcuts = [
+    { action: 'selectTranslateProp', fieldKey: 'style.translate' },
+    { action: 'selectRotateProp', fieldKey: 'style.rotate' },
+    { action: 'selectScaleProp', fieldKey: 'style.scale' },
+    { action: 'selectOpacityProp', fieldKey: 'style.opacity' },
+];
 const hasOwnProperty = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
 const GlobalKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
+    const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
+    const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const showGuides = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition';
+    const showCanvasViewControls = showGuides ||
+        ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
+            (0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset) === 'video');
+    (0, react_1.useEffect)(() => {
+        if (!showCanvasViewControls)
+            return;
+        const outlines = showGuides
+            ? keybindings.registerKeybinding({
+                event: 'keydown',
+                action: 'toggleOutlines',
+                callback: (event) => {
+                    if (!event.repeat)
+                        setEditorShowOutlines((current) => !current);
+                },
+                preventDefault: true,
+                triggerIfInputFieldFocused: false,
+                keepRegisteredWhenNotHighestContext: false,
+            })
+            : null;
+        const rulers = keybindings.registerKeybinding({
+            event: 'keydown',
+            action: 'toggleRulersAndGuides',
+            callback: (event) => {
+                if (event.repeat)
+                    return;
+                const visible = editorShowRulers || (showGuides && editorShowGuides);
+                setEditorShowRulers(() => !visible);
+                if (showGuides)
+                    setEditorShowGuides(() => !visible);
+            },
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            outlines === null || outlines === void 0 ? void 0 : outlines.unregister();
+            rulers.unregister();
+        };
+    }, [
+        keybindings,
+        showCanvasViewControls,
+        showGuides,
+        editorShowRulers,
+        editorShowGuides,
+        setEditorShowOutlines,
+        setEditorShowRulers,
+        setEditorShowGuides,
+    ]);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -84,29 +141,9 @@ const GlobalKeybindings = () => {
         renderButton.click();
     }, [video]);
     (0, react_1.useEffect)(() => {
-        const onSequencePropKey = (event) => {
-            const key = event.key.toLowerCase();
-            const fieldKey = sequencePropShortcuts[key];
-            if (!fieldKey) {
-                return;
-            }
-            if (selectSequenceProp(fieldKey)) {
-                event.preventDefault();
-                return;
-            }
-            if (key === 't') {
-                setCheckerboard((c) => !c);
-                event.preventDefault();
-                return;
-            }
-            if (key === 'r') {
-                openRenderModal();
-                event.preventDefault();
-            }
-        };
         const cmdKKey = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'k',
+            action: 'quickSwitcher',
             callback: () => {
                 var _a;
                 setSelectedModal({
@@ -121,7 +158,6 @@ const GlobalKeybindings = () => {
             },
             triggerIfInputFieldFocused: true,
             keepRegisteredWhenNotHighestContext: false,
-            commandCtrlKey: true,
             preventDefault: true,
         });
         const cmdSKey = keybindings.registerKeybinding({
@@ -138,29 +174,57 @@ const GlobalKeybindings = () => {
         const cmdIKey = (0, studio_runtime_config_1.getStudioAskAIEnabled)()
             ? keybindings.registerKeybinding({
                 event: 'keydown',
-                key: 'i',
+                action: 'askAI',
                 callback: () => {
                     var _a;
                     (_a = AskAiModal_1.askAiModalRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
                 },
                 triggerIfInputFieldFocused: true,
                 keepRegisteredWhenNotHighestContext: true,
-                commandCtrlKey: true,
                 preventDefault: true,
             })
             : null;
-        const sequencePropKeys = Object.keys(sequencePropShortcuts).map((key) => keybindings.registerKeybinding({
+        const sequencePropKeys = sequencePropShortcuts.map(({ action, fieldKey }) => keybindings.registerKeybinding({
             event: 'keydown',
-            key,
-            callback: onSequencePropKey,
-            commandCtrlKey: false,
+            action,
+            callback: (event) => {
+                if (selectSequenceProp(fieldKey)) {
+                    event.preventDefault();
+                }
+            },
             preventDefault: false,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         }));
+        const render = keybindings.registerKeybinding({
+            event: 'keydown',
+            action: 'render',
+            callback: (event) => {
+                if (event.defaultPrevented)
+                    return;
+                openRenderModal();
+                event.preventDefault();
+            },
+            preventDefault: false,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const checkerboard = keybindings.registerKeybinding({
+            event: 'keydown',
+            action: 'toggleCheckerboard',
+            callback: (event) => {
+                if (event.defaultPrevented)
+                    return;
+                setCheckerboard((current) => !current);
+                event.preventDefault();
+            },
+            preventDefault: false,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
         const questionMark = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: '?',
+            event: 'keydown',
+            action: 'showKeyboardShortcuts',
             callback: () => {
                 var _a;
                 var _b;
@@ -170,41 +234,33 @@ const GlobalKeybindings = () => {
                     initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
                 });
             },
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const pageDown = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'PageDown',
+            action: 'nextComposition',
             callback: navigateToNextComposition,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const pageUp = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'PageUp',
+            action: 'previousComposition',
             callback: navigateToPreviousComposition,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const shiftMKey = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'm',
-            callback: (event) => {
-                if (!event.shiftKey) {
-                    return;
-                }
+            action: 'toggleSnapping',
+            callback: () => {
                 setEditorSnapping((current) => !current);
-                event.preventDefault();
             },
-            commandCtrlKey: false,
-            preventDefault: false,
+            preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
@@ -212,6 +268,8 @@ const GlobalKeybindings = () => {
             for (const sequencePropKey of sequencePropKeys) {
                 sequencePropKey.unregister();
             }
+            render.unregister();
+            checkerboard.unregister();
             questionMark.unregister();
             cmdKKey.unregister();
             cmdSKey.unregister();

package/dist/components/InspectorPanel/MultiSequenceField.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export type MultiSequenceTarget = {
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly controls: NonNullable<TSequence['controls']>;
+};
+export declare const MultiSequenceField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly targets: MultiSequenceTarget[];
+    readonly readOnlyStudio: boolean;
+}>;

package/dist/components/InspectorPanel/MultiSequenceField.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSequenceField = 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 interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const noop_1 = require("../../helpers/noop");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const save_sequence_prop_1 = require("../Timeline/save-sequence-prop");
+const TimelineExpandArrowButton_1 = require("../Timeline/TimelineExpandArrowButton");
+const TimelineFieldRowContent_1 = require("../Timeline/TimelineFieldRowContent");
+const TimelineLayerEye_1 = require("../Timeline/TimelineLayerEye");
+const TimelineRowChrome_1 = require("../Timeline/TimelineRowChrome");
+const TimelineSchemaField_1 = require("../Timeline/TimelineSchemaField");
+const MultiSequenceNumberField_1 = require("./MultiSequenceNumberField");
+const MultiSequenceField = ({ field, targets, readOnlyStudio }) => {
+    var _a;
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const [editingMixed, setEditingMixed] = (0, react_1.useState)(false);
+    const statuses = targets.map((target) => {
+        var _a;
+        return (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, target.nodePath)) === null || _a === void 0 ? void 0 : _a[field.key];
+    });
+    const values = statuses.map((status) => (status === null || status === void 0 ? void 0 : status.status) === 'static'
+        ? remotion_1.Internals.getEffectiveVisualModeValue({
+            propStatus: status,
+            dragOverrideValue: undefined,
+            defaultValue: field.fieldSchema.default,
+            shouldResortToDefaultValueIfUndefined: true,
+        })
+        : undefined);
+    const mixed = values.some((value) => JSON.stringify(value) !== JSON.stringify(values[0]));
+    const staticValues = statuses.every((status) => (status === null || status === void 0 ? void 0 : status.status) === 'static');
+    const editable = !readOnlyStudio &&
+        (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
+        previewServerState.type === 'connected' &&
+        staticValues;
+    const clear = (0, react_1.useCallback)(() => {
+        for (const target of targets) {
+            clearDragOverrides(target.nodePath);
+        }
+    }, [clearDragOverrides, targets]);
+    (0, react_1.useEffect)(() => clear, [clear]);
+    const preview = (0, react_1.useCallback)((nextValues) => {
+        if (!editable) {
+            return;
+        }
+        for (const [index, target] of targets.entries()) {
+            setDragOverrides(target.nodePath, field.key, remotion_1.Internals.makeStaticDragOverride(nextValues[index]));
+        }
+    }, [editable, field.key, setDragOverrides, targets]);
+    const save = (0, react_1.useCallback)(async (nextValues, options) => {
+        var _a, _b;
+        if (!editable || previewServerState.type !== 'connected') {
+            return;
+        }
+        try {
+            await (0, save_sequence_prop_1.saveSequenceProps)({
+                changes: targets.map((target, index) => ({
+                    fileName: target.nodePath.absolutePath,
+                    nodePath: target.nodePath,
+                    fieldKey: field.key,
+                    value: nextValues[index],
+                    defaultValue: field.typeName === 'text-content' ||
+                        field.fieldSchema.default === undefined
+                        ? null
+                        : JSON.stringify(field.fieldSchema.default),
+                    schema: target.controls.schema,
+                    sourceEdit: options === null || options === void 0 ? void 0 : options.sourceEdit,
+                })),
+                addedKeyframes: null,
+                movedKeyframes: null,
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+                undoLabel: `Update ${(_a = field.description) !== null && _a !== void 0 ? _a : field.key} on selected sequences`,
+                redoLabel: `Update ${(_b = field.description) !== null && _b !== void 0 ? _b : field.key} on selected sequences again`,
+            });
+            setEditingMixed(false);
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(`Could not save shared control: ${err.message}`, 3000);
+        }
+        finally {
+            clear();
+        }
+    }, [clear, editable, field, previewServerState, setPropStatuses, targets]);
+    let content;
+    if (!editable) {
+        content = (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { formattedValue: staticValues, label: !staticValues
+                ? statuses.some((status) => !status)
+                    ? 'Loading…'
+                    : statuses.some((status) => (status === null || status === void 0 ? void 0 : status.status) === 'computed')
+                        ? 'Computed'
+                        : 'Keyframed'
+                : mixed
+                    ? 'Mixed'
+                    : String((_a = values[0]) !== null && _a !== void 0 ? _a : '') }));
+    }
+    else if ((field.typeName === 'number' &&
+        values.every((value) => typeof value === 'number' && Number.isFinite(value))) ||
+        (field.typeName === 'translate' &&
+            values.every((value) => typeof value === 'string' &&
+                /^-?\d+(?:\.\d+)?px(?:\s+-?\d+(?:\.\d+)?px){0,2}$/.test(value)))) {
+        content = (jsx_runtime_1.jsx(MultiSequenceNumberField_1.MultiSequenceNumberField, { field: field, values: values, onPreview: preview, onSave: (next) => save(next, undefined), onClear: clear }));
+    }
+    else if (mixed && !editingMixed) {
+        content = (jsx_runtime_1.jsx("button", { type: "button", style: {
+                appearance: 'none',
+                border: 'none',
+                background: 'none',
+                color: colors_1.BLUE,
+                fontSize: 12,
+                padding: 0,
+            }, title: "Set a value for all selected sequences", onClick: () => setEditingMixed(true), children: "Mixed" }));
+    }
+    else {
+        content = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [mixed ? jsx_runtime_1.jsx("span", { style: { fontSize: 12 }, children: "Mixed \u00B7 " }) : null, jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, effectiveValue: values[0], propStatus: {
+                        status: 'static',
+                        keyframeDisplayOffsetAdjustment: null,
+                        codeValue: mixed ? undefined : values[0],
+                    }, scaleLockNodePath: field.typeName === 'text-content' ? null : targets[0].nodePath, onSave: (value, options) => save(targets.map(() => value), options), onDragValueChange: (value) => preview(targets.map(() => value)), onDragEnd: clear })
+            ] }));
+    }
+    return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: 0, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: { minHeight: field.rowHeight }, selected: false, selectable: false, onSelect: noop_1.noop, showSelectedBackground: false, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: 0, selected: false, children: content }) }));
+};
+exports.MultiSequenceField = MultiSequenceField;

package/dist/components/InspectorPanel/MultiSequenceInspector.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { TimelineSelection } from '../Timeline/TimelineSelection';
+export declare const MultiSequenceInspector: React.FC<{
+    readonly selections: readonly Extract<TimelineSelection, {
+        type: 'sequence';
+    }>[];
+    readonly readOnlyStudio: boolean;
+}>;