@remotion/studio 4.0.478 → 4.0.481

package/dist/components/InspectorPanel/styles.js

@@ -0,0 +1,196 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
+const colors_1 = require("../../helpers/colors");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+exports.container = {
+    backgroundColor: colors_1.BACKGROUND,
+    color: 'white',
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    height: '100%',
+    minHeight: 0,
+};
+exports.scrollableContainer = {
+    ...exports.container,
+    overflowY: 'auto',
+};
+exports.defaultPropsSection = {
+    display: 'flex',
+    flexDirection: 'column',
+};
+exports.visualControlsSection = {
+    display: 'flex',
+    flexDirection: 'column',
+};
+exports.compositionSection = {
+    display: 'flex',
+    flexDirection: 'column',
+};
+exports.inspectorSectionDivider = {
+    borderBottom: `1px solid ${colors_1.LINE_COLOR}`,
+};
+exports.sectionHeader = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 12,
+    fontWeight: 'bold',
+    padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+};
+exports.sequenceHeader = {
+    backgroundColor: colors_1.BACKGROUND,
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: 0,
+    padding: `6px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 4px`,
+};
+exports.sequenceHeaderTitle = {
+    alignSelf: 'flex-start',
+    backgroundColor: colors_1.BACKGROUND,
+    border: 'none',
+    color: 'white',
+    display: 'inline-flex',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: '18px',
+    margin: 0,
+    maxWidth: '100%',
+    minWidth: 0,
+    overflow: 'hidden',
+    padding: 0,
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+exports.sequenceHeaderSubtitle = {
+    alignSelf: 'flex-start',
+    backgroundColor: colors_1.BACKGROUND,
+    border: 'none',
+    color: colors_1.LIGHT_TEXT,
+    display: 'inline-flex',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: '18px',
+    margin: 0,
+    maxWidth: '100%',
+    minWidth: 0,
+    overflow: 'hidden',
+    padding: 0,
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+exports.sectionHeaderRow = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 8,
+    justifyContent: 'space-between',
+    minWidth: 0,
+};
+exports.sectionHeaderTitle = {
+    color: colors_1.LIGHT_TEXT,
+    flexShrink: 0,
+    fontSize: 12,
+    fontWeight: 'bold',
+    lineHeight: '16px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+exports.sectionHeaderStart = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 8,
+    minWidth: 0,
+};
+exports.sectionHeaderEnd = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+};
+exports.defaultPropsWarningContainer = {
+    alignItems: 'flex-start',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 8px`,
+};
+exports.defaultPropsWarningMessages = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+};
+exports.resolveLinkStyle = {
+    color: colors_1.BLUE,
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    textDecoration: 'underline',
+    whiteSpace: 'nowrap',
+};
+exports.selectedContainer = {
+    backgroundColor: colors_1.BACKGROUND,
+    flex: 1,
+    minHeight: 0,
+    overflowY: 'auto',
+};
+exports.centeredMessage = {
+    alignItems: 'center',
+    color: colors_1.LIGHT_TEXT,
+    display: 'flex',
+    flex: 1,
+    fontSize: 14,
+    justifyContent: 'center',
+    padding: 24,
+    textAlign: 'center',
+};
+exports.detailsContainer = {
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+};
+exports.guideDetailsContainer = {
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+};
+exports.detailRow = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 12,
+    justifyContent: 'space-between',
+    padding: '10px 0',
+};
+exports.detailLabel = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
+};
+exports.detailValue = {
+    color: 'white',
+    fontSize: 13,
+    fontVariantNumeric: 'tabular-nums',
+    minWidth: 0,
+    textAlign: 'right',
+    wordBreak: 'break-word',
+};
+exports.keyframeEditorRow = {
+    alignItems: 'flex-start',
+    display: 'flex',
+    gap: 12,
+    justifyContent: 'space-between',
+    minWidth: 0,
+    padding: '10px 0',
+};
+exports.keyframeEditorLabel = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
+    lineHeight: '22px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+exports.keyframeEditorValue = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    justifyContent: 'flex-end',
+    minHeight: 22,
+    minWidth: 0,
+};

package/dist/components/InspectorPanel/use-track-for-selection.d.ts

@@ -0,0 +1,2 @@
+import type { TimelineSelection } from '../Timeline/TimelineSelection';
+export declare const useTrackForSelection: (selection: TimelineSelection) => import("../../helpers/get-timeline-sequence-sort-key").TrackWithHash | null;

package/dist/components/InspectorPanel/use-track-for-selection.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTrackForSelection = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const find_track_for_node_path_info_1 = require("../Timeline/find-track-for-node-path-info");
+const useTrackForSelection = (selection) => {
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    return (0, react_1.useMemo)(() => {
+        var _a;
+        if (selection.type === 'guide') {
+            return null;
+        }
+        return ((_a = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            nodePathInfo: selection.nodePathInfo,
+        })) !== null && _a !== void 0 ? _a : null);
+    }, [overrideIdToNodePathMappings, selection, sequences]);
+};
+exports.useTrackForSelection = useTrackForSelection;

package/dist/components/InspectorPanel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { _InternalTypes } from 'remotion';
+import type { UpdaterFunction } from './RenderModal/SchemaEditor/ZodSwitch';
+export declare const InspectorPanel: React.FC<{
+    readonly composition: _InternalTypes['AnyComposition'] | null;
+    readonly currentDefaultProps: Record<string, unknown>;
+    readonly setDefaultProps: UpdaterFunction<Record<string, unknown>>;
+}>;

package/dist/components/InspectorPanel.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const common_1 = require("./InspectorPanel/common");
+const DefaultInspector_1 = require("./InspectorPanel/DefaultInspector");
+const inspector_selection_1 = require("./InspectorPanel/inspector-selection");
+const SelectedInspector_1 = require("./InspectorPanel/SelectedInspector");
+const styles_1 = require("./InspectorPanel/styles");
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
+const InspectorPanel = ({ composition, currentDefaultProps, setDefaultProps }) => {
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const sameSequenceInspectorSelection = (0, react_1.useMemo)(() => (0, inspector_selection_1.getSameSequenceInspectorSelection)(selectedItems), [selectedItems]);
+    if (selectedItems.length === 0) {
+        return (jsx_runtime_1.jsx(DefaultInspector_1.DefaultInspector, { composition: composition, currentDefaultProps: currentDefaultProps, setDefaultProps: setDefaultProps }));
+    }
+    if (selectedItems.length > 1) {
+        if (sameSequenceInspectorSelection) {
+            return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: sameSequenceInspectorSelection }) }));
+        }
+        return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsxs(common_1.InspectorMessage, { children: [selectedItems.length, " items selected"] }) }));
+    }
+    return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: selectedItems[0] }) }));
+};
+exports.InspectorPanel = InspectorPanel;

package/dist/components/InspectorPanelLayout.d.ts

@@ -0,0 +1 @@
+export declare const INSPECTOR_PANEL_HORIZONTAL_PADDING = 12;

package/dist/components/InspectorPanelLayout.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INSPECTOR_PANEL_HORIZONTAL_PADDING = void 0;
+exports.INSPECTOR_PANEL_HORIZONTAL_PADDING = 12;

package/dist/components/InspectorSequenceSection.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { TSequence } from 'remotion';
+import type { CodePosition } from '../error-overlay/react-overlay/utils/get-source-map';
+import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
+import { type FlatTreeRow } from '../helpers/timeline-layout';
+import { type TimelineSelection } from './Timeline/TimelineSelection';
+type SequenceWithControls = TSequence & {
+    readonly controls: NonNullable<TSequence['controls']>;
+};
+export declare const getInspectorSelectableItems: (rows: readonly FlatTreeRow[]) => TimelineSelection[];
+export declare const hasSequenceControls: (sequence: TSequence) => sequence is SequenceWithControls;
+export declare const InspectorSequenceSection: React.FC<{
+    readonly sequence: SequenceWithControls;
+    readonly validatedLocation: CodePosition;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly keyframeDisplayOffset: number;
+    readonly renderSectionHeader: (children: React.ReactNode) => React.ReactNode;
+}>;
+export {};

package/dist/components/InspectorSequenceSection.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorSequenceSection = exports.hasSequenceControls = exports.getInspectorSelectableItems = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
+const timeline_layout_1 = require("../helpers/timeline-layout");
+const plus_1 = require("../icons/plus");
+const modals_1 = require("../state/modals");
+const InlineAction_1 = require("./InlineAction");
+const styles_1 = require("./InspectorPanel/styles");
+const TimelineExpandedRow_1 = require("./Timeline/TimelineExpandedRow");
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
+const use_timeline_expanded_tree_1 = require("./Timeline/use-timeline-expanded-tree");
+const container = {
+    color: 'white',
+    display: 'flex',
+    flexDirection: 'column',
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    fontSize: 12,
+};
+const emptyState = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: 1.4,
+    padding: '0 12px 8px',
+};
+const divider = {
+    backgroundColor: colors_1.LINE_COLOR,
+    flexShrink: 0,
+    height: 1,
+    margin: '4px 0',
+};
+const controlsEffectsDivider = {
+    ...divider,
+    margin: '8px 0 4px',
+};
+const effectsHeaderTitle = {
+    ...styles_1.sectionHeaderTitle,
+    flexShrink: 1,
+};
+const plusIcon = {
+    width: 15,
+    height: 15,
+};
+const isEffectsRoot = (node) => {
+    if (node.kind !== 'group' || node.effectInfo !== null) {
+        return false;
+    }
+    const { auxiliaryKeys } = node.nodePathInfo;
+    return auxiliaryKeys[auxiliaryKeys.length - 1] === 'effects';
+};
+const getInspectorExpansionKey = (nodePathInfo) => {
+    return JSON.stringify(nodePathInfo);
+};
+const getInspectorSelectableItems = (rows) => {
+    return rows.flatMap(({ node }) => {
+        const selection = (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(node.nodePathInfo);
+        return selection ? [selection] : [];
+    });
+};
+exports.getInspectorSelectableItems = getInspectorSelectableItems;
+const hasSequenceControls = (sequence) => {
+    return sequence.controls !== null;
+};
+exports.hasSequenceControls = hasSequenceControls;
+const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderSectionHeader, }) => {
+    const { tree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
+        sequence,
+        nodePathInfo,
+    });
+    const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(() => new Set());
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const getIsExpanded = (0, react_1.useCallback)((candidate) => {
+        return !collapsedKeys.has(getInspectorExpansionKey(candidate));
+    }, [collapsedKeys]);
+    const toggleTrack = (0, react_1.useCallback)((candidate) => {
+        setCollapsedKeys((prev) => {
+            const key = getInspectorExpansionKey(candidate);
+            const next = new Set(prev);
+            if (next.has(key)) {
+                next.delete(key);
+            }
+            else {
+                next.add(key);
+            }
+            return next;
+        });
+    }, []);
+    const { controlRows, effectRows } = (0, react_1.useMemo)(() => {
+        const controlNodes = [];
+        let effectsRoot = null;
+        for (const node of tree) {
+            if (isEffectsRoot(node)) {
+                effectsRoot = node;
+            }
+            else {
+                controlNodes.push(node);
+            }
+        }
+        return {
+            controlRows: (0, timeline_layout_1.flattenVisibleTreeNodes)({
+                nodes: controlNodes,
+                getIsExpanded,
+            }),
+            effectRows: effectsRoot === null
+                ? []
+                : (0, timeline_layout_1.flattenVisibleTreeNodes)({
+                    nodes: effectsRoot.children,
+                    getIsExpanded,
+                }),
+        };
+    }, [getIsExpanded, tree]);
+    const controlSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(controlRows), [controlRows]);
+    const effectSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(effectRows), [effectRows]);
+    const { schema } = sequence.controls;
+    const showEffectsSection = nodePathInfo.supportsEffects || effectRows.length > 0;
+    const showControlsEffectsDivider = controlRows.length > 0 && showEffectsSection;
+    const canAddEffect = nodePathInfo.supportsEffects &&
+        previewServerState.type === 'connected' &&
+        Boolean(validatedLocation.source);
+    const onAddEffect = (0, react_1.useCallback)(() => {
+        if (!canAddEffect || previewServerState.type !== 'connected') {
+            return;
+        }
+        setSelectedModal({
+            type: 'add-effect',
+            clientId: previewServerState.clientId,
+            fileName: validatedLocation.source,
+            nodePath: nodePathInfo.sequenceSubscriptionKey,
+        });
+    }, [
+        canAddEffect,
+        nodePathInfo.sequenceSubscriptionKey,
+        previewServerState,
+        setSelectedModal,
+        validatedLocation.source,
+    ]);
+    const renderEffectsHeader = () => {
+        return renderSectionHeader(jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
+                jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
+    };
+    const renderRow = ({ node, depth }) => {
+        return (jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }, JSON.stringify(node.nodePathInfo)));
+    };
+    if (controlRows.length === 0 && !showEffectsSection) {
+        return (jsx_runtime_1.jsxs("div", { style: container, children: [
+                jsx_runtime_1.jsx("div", { style: divider }), jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" })
+            ] }));
+    }
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx("div", { style: divider }), controlRows.length > 0 ? renderSectionHeader('Controls') : null, jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlRows.map(renderRow) }), showEffectsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showControlsEffectsDivider ? (jsx_runtime_1.jsx("div", { style: controlsEffectsDivider })) : null, renderEffectsHeader(), effectRows.length === 0 ? (jsx_runtime_1.jsx("div", { style: emptyState, children: "None" })) : (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) }))] })) : null] }));
+};
+exports.InspectorSequenceSection = InspectorSequenceSection;

package/dist/components/InspectorSourceLocation.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
+export declare const InspectorSourceLocation: React.FC<{
+    readonly location: OriginalPosition | null;
+    readonly canOpen: boolean;
+    readonly onOpen: () => void;
+}>;

package/dist/components/InspectorSourceLocation.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorSourceLocation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const format_file_location_1 = require("../helpers/format-file-location");
+const source_attribution_1 = require("./Timeline/TimelineStack/source-attribution");
+const sourceLocationStyle = {
+    alignSelf: 'flex-start',
+    appearance: 'none',
+    backgroundColor: colors_1.BACKGROUND,
+    border: 'none',
+    boxSizing: 'border-box',
+    display: 'block',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    height: 18,
+    lineHeight: '18px',
+    margin: 0,
+    maxWidth: '100%',
+    overflow: 'hidden',
+    padding: 0,
+    textAlign: 'left',
+    textDecoration: 'none',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    width: 'fit-content',
+};
+const InspectorSourceLocation = ({ location, canOpen, onOpen }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const validLocation = (0, react_1.useMemo)(() => {
+        if (!(location === null || location === void 0 ? void 0 : location.source) || location.line === null) {
+            return null;
+        }
+        return location;
+    }, [location]);
+    const fileLocation = (0, react_1.useMemo)(() => {
+        if (!validLocation) {
+            return null;
+        }
+        return (0, format_file_location_1.formatFileLocation)({
+            location: validLocation,
+            root: window.remotion_cwd,
+        });
+    }, [validLocation]);
+    const label = (0, react_1.useMemo)(() => {
+        if (!validLocation) {
+            return null;
+        }
+        return (0, source_attribution_1.getOriginalSourceAttribution)(validLocation);
+    }, [validLocation]);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...sourceLocationStyle,
+            color: hovered ? colors_1.LIGHT_COLOR : colors_1.LIGHT_TEXT,
+            cursor: canOpen ? 'pointer' : 'default',
+        };
+    }, [canOpen, hovered]);
+    const onClick = (0, react_1.useCallback)(() => {
+        if (!canOpen) {
+            return;
+        }
+        onOpen();
+    }, [canOpen, onOpen]);
+    if (!label) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: label }));
+};
+exports.InspectorSourceLocation = InspectorSourceLocation;

package/dist/components/KeyboardShortcutsExplainer.js

@@ -109,9 +109,9 @@ const KeyboardShortcutsExplainer = () => {
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                     jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "PageDown" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Next composition" })
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "R" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Render composition" })
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "R" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Render, unless a sequence or prop is selected" })
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "T" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Toggle checkerboard background" })
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "T" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Checkerboard, unless a sequence or prop is selected" })
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                     jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "?" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Show keyboard shortcuts" })
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
@@ -146,6 +146,14 @@ const KeyboardShortcutsExplainer = () => {
                                     jsx_runtime_1.jsxs("div", { style: left, children: [
                                             jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "A" })
                                         ] }), jsx_runtime_1.jsx("div", { style: right, children: "Select sequence rows" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "P" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select translate prop" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "T" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select opacity prop" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "R" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select rotate prop" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "S" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select scale prop" })
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                     jsx_runtime_1.jsxs("div", { style: left, children: [
                                             jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "D" })

package/dist/components/Modals.js

@@ -10,6 +10,7 @@ const client_id_1 = require("../helpers/client-id");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
+const EffectPickerModal_1 = require("./EffectPickerModal");
 const InstallPackage_1 = require("./InstallPackage");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
@@ -22,7 +23,6 @@ const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher")
 const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
 const ServerRenderModal_1 = require("./RenderModal/ServerRenderModal");
 const WebRenderModal_1 = require("./RenderModal/WebRenderModal");
-const EasingEditorModal_1 = require("./Timeline/EasingEditorModal");
 const KeyframeSettingsModal_1 = require("./Timeline/KeyframeSettingsModal");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = ({ readOnlyStudio }) => {
@@ -30,8 +30,8 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'easing-editor' && (jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditorModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/NewComposition/InputDragger.js

@@ -207,7 +207,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         });
     }, [_min, _step, snapToStep]);
     if (inputFallback) {
-        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props, ...(small ? { style: { padding: '4px 6px', fontSize: 12 } } : {}) }) }));
+        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, small: small, ...props }) }));
     }
     return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: style, onClick: onClick, onFocus: onFocus, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
 };

package/dist/components/NewComposition/RemInput.d.ts

@@ -4,6 +4,7 @@ export type RemInputStatus = 'error' | 'warning' | 'ok';
 type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
     readonly status: RemInputStatus;
     readonly rightAlign: boolean;
+    readonly small?: boolean;
 };
 export declare const INPUT_HORIZONTAL_PADDING = 8;
 export declare const RightAlignInput: React.FC<PropsWithChildren>;