@remotion/studio 4.0.522 → 4.0.523

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

@@ -6,15 +6,10 @@ 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 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,18 @@ const FullScreenToggle = ({ hidden }) => {
                 },
             }));
     }, [setSize]);
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('enterFullscreen');
+    const accessibilityLabel = [
+        'Enter fullscreen preview',
+        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || shortcut === '' ? null : `(${shortcut})`,
+    ]
+        .filter(no_react_1.NoReactInternals.truthy)
+        .join(' ');
     (0, react_1.useEffect)(() => {
         const f = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'f',
+            action: 'enterFullscreen',
             callback: onClick,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,

package/dist/components/GlobalKeybindings.js

@@ -15,12 +15,12 @@ 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)();
@@ -84,29 +84,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 +101,6 @@ const GlobalKeybindings = () => {
             },
             triggerIfInputFieldFocused: true,
             keepRegisteredWhenNotHighestContext: false,
-            commandCtrlKey: true,
             preventDefault: true,
         });
         const cmdSKey = keybindings.registerKeybinding({
@@ -138,29 +117,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 +177,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 +211,8 @@ const GlobalKeybindings = () => {
             for (const sequencePropKey of sequencePropKeys) {
                 sequencePropKey.unregister();
             }
+            render.unregister();
+            checkerboard.unregister();
             questionMark.unregister();
             cmdKKey.unregister();
             cmdSKey.unregister();

package/dist/components/HighlightedElementSource.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const HighlightedElementSource: React.FC<{
+    readonly source: string;
+}>;
+export default HighlightedElementSource;

package/dist/components/HighlightedElementSource.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const prismjs_1 = __importDefault(require("prismjs"));
+const react_1 = __importStar(require("react"));
+// These CommonJS grammars read global Prism. Load them after initialization:
+// Bun hoists side-effect imports ahead of the CommonJS default import.
+prismjs_1.default.manual = true;
+require('prismjs/components/prism-jsx.js');
+require('prismjs/components/prism-typescript.js');
+require('prismjs/components/prism-tsx.js');
+const tokenStyle = {
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+};
+const renderTokens = (tokens) => {
+    var _a;
+    if (typeof tokens === 'string') {
+        return tokens;
+    }
+    if (Array.isArray(tokens)) {
+        let offset = 0;
+        return tokens.map((token) => {
+            const key = offset;
+            offset += token.length;
+            return jsx_runtime_1.jsx(react_1.default.Fragment, { children: renderTokens(token) }, key);
+        });
+    }
+    return (jsx_runtime_1.jsx("span", { className: [
+            'token',
+            tokens.type,
+            ...(typeof tokens.alias === 'string'
+                ? [tokens.alias]
+                : ((_a = tokens.alias) !== null && _a !== void 0 ? _a : [])),
+        ].join(' '), style: tokenStyle, children: renderTokens(tokens.content) }));
+};
+const HighlightedElementSource = ({ source, }) => {
+    const tokens = (0, react_1.useMemo)(() => prismjs_1.default.tokenize(source, prismjs_1.default.languages.tsx), [source]);
+    return (jsx_runtime_1.jsx("span", { style: { ...tokenStyle, color: 'inherit' }, children: renderTokens(tokens) }));
+};
+exports.default = HighlightedElementSource;

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;
+}>;