@remotion/studio 4.0.489 → 4.0.490

package/dist/components/Canvas.js

@@ -12,6 +12,7 @@ const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
+const install_required_package_1 = require("../helpers/install-required-package");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
 const smooth_zoom_1 = require("../helpers/smooth-zoom");
@@ -35,6 +36,18 @@ const elementInstallCompositionIdStyle = {
     fontFamily: 'monospace',
     fontSize: 13,
 };
+const elementInstallDependencyListStyle = {
+    marginTop: 8,
+    marginBottom: 0,
+    paddingLeft: 24,
+    listStyleType: 'disc',
+};
+const elementInstallDependencyStyle = {
+    color: 'inherit',
+    fontFamily: 'monospace',
+    fontSize: 13,
+    lineHeight: 1.5,
+};
 const elementInstallCodeDetailsStyle = {
     marginTop: 12,
     fontSize: 13,
@@ -693,10 +706,14 @@ const Canvas = ({ canvasContent, size }) => {
         let canceled = false;
         const handleInstallRequest = async () => {
             setInstallingElementName(activeElementInstallRequest.element.displayName);
+            const missingPackages = (0, install_required_package_1.getMissingPackages)(activeElementInstallRequest.element.dependencies);
             const accepted = await confirm({
                 title: 'Install Element',
-                message: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["Install \u201C", activeElementInstallRequest.element.displayName, "\u201D into", ' ', jsx_runtime_1.jsx("code", { style: elementInstallCompositionIdStyle, children: activeElementInstallRequest.compositionId }), ' ', "composition? This will create an Element source file and update the composition source.",
-                        jsx_runtime_1.jsxs("details", { style: elementInstallCodeDetailsStyle, children: [
+                message: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["Install \u201C", activeElementInstallRequest.element.displayName, "\u201D into", ' ', jsx_runtime_1.jsx("code", { style: elementInstallCompositionIdStyle, children: activeElementInstallRequest.compositionId }), ' ', "composition? This will create an Element source file and update the composition source.", missingPackages.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("br", {}),
+                                "The following dependencies will also be installed:",
+                                jsx_runtime_1.jsx("ul", { style: elementInstallDependencyListStyle, children: missingPackages.map((packageName) => (jsx_runtime_1.jsx("li", { style: elementInstallDependencyStyle, children: packageName }, packageName))) })
+                            ] })) : null, jsx_runtime_1.jsxs("details", { style: elementInstallCodeDetailsStyle, children: [
                                 jsx_runtime_1.jsx("summary", { style: elementInstallCodeSummaryStyle, children: "Preview Element source" }), jsx_runtime_1.jsx("pre", { style: elementInstallCodeBlockStyle, children: jsx_runtime_1.jsx("code", { children: activeElementInstallRequest.element.sourceCode }) })
                             ] })
                     ] })),

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const AlignmentControls: React.FC<{
+    readonly track: TrackWithHash;
+}>;

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -0,0 +1,205 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlignmentControls = 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 align_bottom_1 = require("../../icons/align-bottom");
+const align_center_horizontal_1 = require("../../icons/align-center-horizontal");
+const align_center_vertical_1 = require("../../icons/align-center-vertical");
+const align_left_1 = require("../../icons/align-left");
+const align_right_1 = require("../../icons/align-right");
+const align_top_1 = require("../../icons/align-top");
+const InlineAction_1 = require("../InlineAction");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const selected_outline_drag_1 = require("../selected-outline-drag");
+const selected_outline_types_1 = require("../selected-outline-types");
+const call_add_keyframe_1 = require("../Timeline/call-add-keyframe");
+const save_sequence_prop_1 = require("../Timeline/save-sequence-prop");
+const timeline_translate_utils_1 = require("../Timeline/timeline-translate-utils");
+const alignment_controls_1 = require("./alignment-controls");
+const isPropStatusDraggable = (propStatus) => {
+    return (!propStatus ||
+        propStatus.status === 'static' ||
+        (propStatus.status === 'keyframed' &&
+            propStatus.interpolationFunction === 'interpolate'));
+};
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 4,
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 12px`,
+    alignItems: 'center',
+};
+const iconStyle = {
+    width: 16,
+    height: 16,
+};
+const verticalDivider = {
+    width: 1,
+    height: 16,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    margin: '0 8px',
+};
+const AlignmentButton = ({ onClick, title, Icon, disabled }) => {
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: title, onClick: onClick, renderAction: (color) => jsx_runtime_1.jsx(Icon, { style: iconStyle, color: color }), disabled: disabled }));
+};
+const AlignmentControls = ({ track }) => {
+    var _a;
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const currentCompositionMetadata = (0, react_1.useMemo)(() => {
+        var _a;
+        if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'composition')
+            return null;
+        return ((_a = compositions.find((c) => c.id === canvasContent.compositionId)) !== null && _a !== void 0 ? _a : null);
+    }, [canvasContent, compositions]);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const handleAlign = (0, react_1.useCallback)((direction) => {
+        var _a;
+        var _b, _c, _d, _e;
+        if (previewServerState.type !== 'connected' ||
+            !track.nodePathInfo ||
+            !track.sequence.controls) {
+            return;
+        }
+        const ref = (_a = track.sequence.refForOutline) === null || _a === void 0 ? void 0 : _a.current;
+        if (!ref) {
+            return;
+        }
+        const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
+        const nodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
+        const sourceFrame = timelinePosition - track.keyframeDisplayOffset;
+        const dragOverrides = (_b = getDragOverrides(nodePath)) !== null && _b !== void 0 ? _b : {};
+        const activeSchema = (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
+            schema: track.sequence.controls.schema,
+            currentRuntimeValueDotNotation: track.sequence.controls.currentRuntimeValueDotNotation,
+            dragOverrides,
+            propStatus: nodePropStatuses,
+            frame: sourceFrame,
+        });
+        const fieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.translateFieldKey];
+        const propStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.translateFieldKey];
+        if ((fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) !== 'translate') {
+            return;
+        }
+        if (!isPropStatusDraggable(propStatus)) {
+            return;
+        }
+        let elementRect;
+        try {
+            elementRect = ref.getBoundingClientRect();
+        }
+        catch (_f) {
+            return;
+        }
+        if (!(currentCompositionMetadata === null || currentCompositionMetadata === void 0 ? void 0 : currentCompositionMetadata.width)) {
+            return;
+        }
+        const compositionRect = remotion_1.Internals.portalNode().getBoundingClientRect();
+        if (compositionRect.width === 0 || compositionRect.height === 0) {
+            return;
+        }
+        const scale = compositionRect.width / currentCompositionMetadata.width;
+        const currentTranslate = propStatus
+            ? String((_d = (_c = remotion_1.Internals.getEffectiveVisualModeValue({
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                propStatus: propStatus,
+                dragOverrideValue: dragOverrides[selected_outline_types_1.translateFieldKey],
+                defaultValue: fieldSchema.default,
+                frame: sourceFrame,
+                shouldResortToDefaultValueIfUndefined: true,
+            })) !== null && _c !== void 0 ? _c : fieldSchema.default) !== null && _d !== void 0 ? _d : '0px 0px')
+            : String((_e = fieldSchema.default) !== null && _e !== void 0 ? _e : '0px 0px');
+        const [currentX, currentY] = (0, timeline_translate_utils_1.parseTranslate)(currentTranslate);
+        const { x: newX, y: newY } = (0, alignment_controls_1.computeAlignedTranslate)({
+            direction,
+            elementRect,
+            compositionRect,
+            currentTranslateX: currentX,
+            currentTranslateY: currentY,
+            scale,
+        });
+        const newValue = (0, timeline_translate_utils_1.serializeTranslate)(newX, newY);
+        const undoLabels = {
+            left: 'Align left',
+            'center-h': 'Align center horizontally',
+            right: 'Align right',
+            top: 'Align top',
+            'center-v': 'Align center vertically',
+            bottom: 'Align bottom',
+        };
+        const label = undoLabels[direction];
+        if (!propStatus || propStatus.status === 'static') {
+            (0, save_sequence_prop_1.saveSequenceProps)({
+                changes: [
+                    {
+                        fileName: nodePath.absolutePath,
+                        nodePath,
+                        fieldKey: selected_outline_types_1.translateFieldKey,
+                        value: newValue,
+                        defaultValue: fieldSchema.default !== undefined
+                            ? JSON.stringify(fieldSchema.default)
+                            : null,
+                        schema: track.sequence.controls.schema,
+                    },
+                ],
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+                undoLabel: label,
+                redoLabel: label,
+            });
+        }
+        else {
+            (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+                fileName: nodePath.absolutePath,
+                nodePath,
+                fieldKey: selected_outline_types_1.translateFieldKey,
+                sourceFrame,
+                value: newValue,
+                schema: track.sequence.controls.schema,
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+            });
+        }
+    }, [
+        previewServerState,
+        track,
+        currentCompositionMetadata,
+        timelinePosition,
+        propStatuses,
+        getDragOverrides,
+        setPropStatuses,
+    ]);
+    if (previewServerState.type !== 'connected' ||
+        !track.nodePathInfo ||
+        !track.sequence.controls ||
+        !currentCompositionMetadata) {
+        return null;
+    }
+    const renderNodePath = track.nodePathInfo.sequenceSubscriptionKey;
+    const renderNodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, renderNodePath);
+    const renderSourceFrame = timelinePosition - track.keyframeDisplayOffset;
+    const renderDragOverrides = (_a = getDragOverrides(renderNodePath)) !== null && _a !== void 0 ? _a : {};
+    const renderActiveSchema = (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
+        schema: track.sequence.controls.schema,
+        currentRuntimeValueDotNotation: track.sequence.controls.currentRuntimeValueDotNotation,
+        dragOverrides: renderDragOverrides,
+        propStatus: renderNodePropStatuses,
+        frame: renderSourceFrame,
+    });
+    const renderFieldSchema = renderActiveSchema === null || renderActiveSchema === void 0 ? void 0 : renderActiveSchema[selected_outline_types_1.translateFieldKey];
+    const renderPropStatus = renderNodePropStatuses === null || renderNodePropStatuses === void 0 ? void 0 : renderNodePropStatuses[selected_outline_types_1.translateFieldKey];
+    if ((renderFieldSchema === null || renderFieldSchema === void 0 ? void 0 : renderFieldSchema.type) !== 'translate') {
+        return null;
+    }
+    const alignmentDisabled = !isPropStatusDraggable(renderPropStatus);
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx(AlignmentButton, { title: "Align left", onClick: () => handleAlign('left'), Icon: align_left_1.AlignLeftIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align center horizontally", onClick: () => handleAlign('center-h'), Icon: align_center_horizontal_1.AlignCenterHorizontalIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align right", onClick: () => handleAlign('right'), Icon: align_right_1.AlignRightIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx("div", { style: verticalDivider }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align top", onClick: () => handleAlign('top'), Icon: align_top_1.AlignTopIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align center vertically", onClick: () => handleAlign('center-v'), Icon: align_center_vertical_1.AlignCenterVerticalIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align bottom", onClick: () => handleAlign('bottom'), Icon: align_bottom_1.AlignBottomIcon, disabled: alignmentDisabled })
+        ] }));
+};
+exports.AlignmentControls = AlignmentControls;

package/dist/components/InspectorPanel/EasingInspector.js

@@ -16,6 +16,7 @@ const update_selected_easing_1 = require("../Timeline/update-selected-easing");
 const common_1 = require("./common");
 const easing_inspector_selection_1 = require("./easing-inspector-selection");
 const KeyframeEasingNavigator_1 = require("./KeyframeEasingNavigator");
+const KeyframeSettings_1 = require("./KeyframeSettings");
 const SequenceInspectorHeader_1 = require("./SequenceInspectorHeader");
 const styles_1 = require("./styles");
 const use_track_for_selection_1 = require("./use-track-for-selection");
@@ -206,10 +207,15 @@ const EasingInspector = ({ selection }) => {
         selection,
         track,
     ]);
-    if (state === null || track === null || currentEasingSelection === null) {
+    if (state === null ||
+        track === null ||
+        currentEasingSelection === null ||
+        easingUpdate === null) {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Easing unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeaderWithDivider, { track: track }), jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditor, { state: state, renderHeader: renderHeader }, (0, TimelineSelection_1.getTimelineSelectionKey)(currentEasingSelection)), canAddKeyframeAtPlayhead ? (jsx_runtime_1.jsx("div", { style: styles_1.detailsContainer, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: addKeyframeDisabled, onClick: onAddKeyframeAtPlayhead, renderIcon: (color) => (jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: addKeyframeIcon })), children: `Add keyframe at ${addKeyframeTime}` }) })) : null] }));
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeaderWithDivider, { track: track }), jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditor, { state: state, renderHeader: renderHeader }, (0, TimelineSelection_1.getTimelineSelectionKey)(currentEasingSelection)), jsx_runtime_1.jsx(KeyframeSettings_1.KeyframeSettings, { update: easingUpdate }), canAddKeyframeAtPlayhead ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }), jsx_runtime_1.jsx("div", { style: styles_1.detailsContainer, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: addKeyframeDisabled, onClick: onAddKeyframeAtPlayhead, renderIcon: (color) => (jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: addKeyframeIcon })), children: `Add keyframe at ${addKeyframeTime}` }) })
+                ] })) : null] }));
 };
 exports.EasingInspector = EasingInspector;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { SelectedEasingUpdate } from '../Timeline/update-selected-easing';
+export declare const KeyframeSettings: React.FC<{
+    readonly update: SelectedEasingUpdate;
+}>;

package/dist/components/InspectorPanel/KeyframeSettings.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyframeSettings = 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 ComboBox_1 = require("../NewComposition/ComboBox");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const call_update_keyframe_settings_1 = require("../Timeline/call-update-keyframe-settings");
+const common_1 = require("./common");
+const styles_1 = require("./styles");
+const comboStyle = {
+    minWidth: 120,
+};
+const keyframeSettingsContainer = {
+    ...styles_1.detailsContainer,
+    paddingBottom: 0,
+};
+const extrapolateOptions = [
+    'extend',
+    'clamp',
+    'identity',
+    'wrap',
+];
+const labelForExtrapolate = (value) => value[0].toUpperCase() + value.slice(1);
+const getExtrapolateValues = (onSelect, disabled) => {
+    return extrapolateOptions.map((value) => ({
+        type: 'item',
+        id: value,
+        keyHint: null,
+        label: labelForExtrapolate(value),
+        leftItem: null,
+        disabled,
+        onClick: () => onSelect(value),
+        quickSwitcherLabel: null,
+        subMenu: null,
+        value,
+    }));
+};
+const outputOptions = [
+    'linear',
+    'perceptual-scale',
+];
+const labelForOutput = (value) => {
+    return value === 'perceptual-scale' ? 'Perceptual scale' : 'Linear';
+};
+const getOutputValues = (onSelect, disabled) => {
+    return outputOptions.map((value) => ({
+        type: 'item',
+        id: value,
+        keyHint: null,
+        label: labelForOutput(value),
+        leftItem: null,
+        disabled,
+        onClick: () => onSelect(value),
+        quickSwitcherLabel: null,
+        subMenu: null,
+        value,
+    }));
+};
+const KeyframeSettings = ({ update }) => {
+    var _a, _b;
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { propStatus } = update;
+    const [posterize, setPosterize] = (0, react_1.useState)((_a = propStatus.posterize) !== null && _a !== void 0 ? _a : 0);
+    const canEditInterpolationSettings = propStatus.interpolationFunction === 'interpolate';
+    const disabled = previewServerState.type !== 'connected';
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setPosterize((_a = propStatus.posterize) !== null && _a !== void 0 ? _a : 0);
+    }, [propStatus.posterize]);
+    const save = (0, react_1.useCallback)((settings) => {
+        if (previewServerState.type !== 'connected') {
+            return;
+        }
+        if (update.type === 'sequence') {
+            (0, call_update_keyframe_settings_1.callUpdateSequenceKeyframeSettings)({
+                fileName: update.fileName,
+                nodePath: update.nodePath,
+                fieldKey: update.fieldKey,
+                settings,
+                schema: update.schema,
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+            }).catch(() => undefined);
+            return;
+        }
+        (0, call_update_keyframe_settings_1.callUpdateEffectKeyframeSettings)({
+            fileName: update.fileName,
+            nodePath: update.nodePath,
+            effectIndex: update.effectIndex,
+            fieldKey: update.fieldKey,
+            settings,
+            schema: update.schema,
+            setPropStatuses,
+            clientId: previewServerState.clientId,
+        }).catch(() => undefined);
+    }, [previewServerState, setPropStatuses, update]);
+    const saveSettings = (0, react_1.useCallback)((_a) => {
+        var _b, _c;
+        var { left = propStatus.clamping.left, output = (_b = propStatus.output) !== null && _b !== void 0 ? _b : 'linear', posterize: nextPosterize = (_c = propStatus.posterize) !== null && _c !== void 0 ? _c : 0, right = propStatus.clamping.right, } = _a;
+        save({
+            type: 'settings',
+            clamping: canEditInterpolationSettings ? { left, right } : undefined,
+            output: canEditInterpolationSettings ? output : undefined,
+            posterize: nextPosterize <= 0 ? undefined : nextPosterize,
+        });
+    }, [
+        canEditInterpolationSettings,
+        propStatus.clamping.left,
+        propStatus.clamping.right,
+        propStatus.output,
+        propStatus.posterize,
+        save,
+    ]);
+    const onSelectLeft = (0, react_1.useCallback)((left) => saveSettings({ left }), [saveSettings]);
+    const onSelectRight = (0, react_1.useCallback)((right) => saveSettings({ right }), [saveSettings]);
+    const onSelectOutput = (0, react_1.useCallback)((output) => saveSettings({ output }), [saveSettings]);
+    const leftValues = (0, react_1.useMemo)(() => getExtrapolateValues(onSelectLeft, disabled), [disabled, onSelectLeft]);
+    const rightValues = (0, react_1.useMemo)(() => getExtrapolateValues(onSelectRight, disabled), [disabled, onSelectRight]);
+    const outputValues = (0, react_1.useMemo)(() => getOutputValues(onSelectOutput, disabled), [disabled, onSelectOutput]);
+    const onPosterizeChange = (0, react_1.useCallback)((value) => {
+        setPosterize(Math.max(0, Math.round(value)));
+    }, []);
+    const onPosterizeChangeEnd = (0, react_1.useCallback)((value) => {
+        const nextPosterize = Math.max(0, Math.round(value));
+        setPosterize(nextPosterize);
+        saveSettings({ posterize: nextPosterize });
+    }, [saveSettings]);
+    const posterizeFormatter = (0, react_1.useCallback)((value) => {
+        return String(Math.round(Number(value)));
+    }, []);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }), jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Keyframe settings" }), jsx_runtime_1.jsxs("div", { style: keyframeSettingsContainer, children: [canEditInterpolationSettings ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Extrapolate left", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: leftValues, selectedId: propStatus.clamping.left, title: "Extrapolate left", style: comboStyle, small: true }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Extrapolate right", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: rightValues, selectedId: propStatus.clamping.right, title: "Extrapolate right", style: comboStyle, small: true }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Output", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: outputValues, selectedId: (_b = propStatus.output) !== null && _b !== void 0 ? _b : 'linear', title: "Output", style: comboStyle, small: true }) })
+                        ] })) : null, jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Posterize", children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: posterize, status: "ok", onValueChange: onPosterizeChange, onValueChangeEnd: onPosterizeChangeEnd, onTextChange: () => undefined, min: 0, step: 1, formatter: posterizeFormatter, rightAlign: true, small: true, disabled: disabled }) })
+                ] })
+        ] }));
+};
+exports.KeyframeSettings = KeyframeSettings;

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -7,6 +7,7 @@ const client_id_1 = require("../../helpers/client-id");
 const InspectorSequenceSection_1 = require("../InspectorSequenceSection");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
+const AlignmentControls_1 = require("./AlignmentControls");
 const common_1 = require("./common");
 const SequenceInspectorHeader_1 = require("./SequenceInspectorHeader");
 const styles_1 = require("./styles");
@@ -51,7 +52,7 @@ const SequenceExpandedInspector = ({ track }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderSectionHeader: (children) => (jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: children })) })] }));
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderSectionHeader: (children) => (jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: children })), renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) })] }));
 };
 const SequenceSelectionInspector = ({ selection }) => {
     const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);

package/dist/components/InspectorPanel/alignment-controls.d.ts

@@ -0,0 +1,12 @@
+export type AlignmentDirection = 'left' | 'center-h' | 'right' | 'top' | 'center-v' | 'bottom';
+export declare const computeAlignedTranslate: ({ direction, elementRect, compositionRect, currentTranslateX, currentTranslateY, scale, }: {
+    readonly direction: AlignmentDirection;
+    readonly elementRect: DOMRect;
+    readonly compositionRect: DOMRect;
+    readonly currentTranslateX: number;
+    readonly currentTranslateY: number;
+    readonly scale: number;
+}) => {
+    x: number;
+    y: number;
+};

package/dist/components/InspectorPanel/alignment-controls.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeAlignedTranslate = void 0;
+const computeAlignedTranslate = ({ direction, elementRect, compositionRect, currentTranslateX, currentTranslateY, scale, }) => {
+    let deltaX = 0;
+    let deltaY = 0;
+    // Note: elementRect and compositionRect are in screen space (pixels).
+    // We divide by scale to convert back to composition space.
+    switch (direction) {
+        case 'left':
+            deltaX = compositionRect.left - elementRect.left;
+            break;
+        case 'center-h': {
+            const compCenter = compositionRect.left + compositionRect.width / 2;
+            const elemCenter = elementRect.left + elementRect.width / 2;
+            deltaX = compCenter - elemCenter;
+            break;
+        }
+        case 'right':
+            deltaX = compositionRect.right - elementRect.right;
+            break;
+        case 'top':
+            deltaY = compositionRect.top - elementRect.top;
+            break;
+        case 'center-v': {
+            const compCenter = compositionRect.top + compositionRect.height / 2;
+            const elemCenter = elementRect.top + elementRect.height / 2;
+            deltaY = compCenter - elemCenter;
+            break;
+        }
+        case 'bottom':
+            deltaY = compositionRect.bottom - elementRect.bottom;
+            break;
+        default:
+            break;
+    }
+    return {
+        x: currentTranslateX + deltaX / scale,
+        y: currentTranslateY + deltaY / scale,
+    };
+};
+exports.computeAlignedTranslate = computeAlignedTranslate;

package/dist/components/InspectorSequenceSection.d.ts

@@ -15,5 +15,6 @@ export declare const InspectorSequenceSection: React.FC<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
     readonly renderSectionHeader: (children: React.ReactNode) => React.ReactNode;
+    readonly renderTransformControls: () => React.ReactNode;
 }>;
 export {};

package/dist/components/InspectorSequenceSection.js

@@ -133,7 +133,7 @@ const hasSequenceControls = (sequence) => {
     return sequence.controls !== null;
 };
 exports.hasSequenceControls = hasSequenceControls;
-const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderSectionHeader, }) => {
+const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderSectionHeader, renderTransformControls, }) => {
     const { tree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
@@ -222,6 +222,6 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
             ] }));
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider }), controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group, i) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i === 0 ? null : jsx_runtime_1.jsx("div", { style: controlsEffectsDivider }), renderSectionHeader(group.label), group.rows.map(renderRow)] }, group.id))) })) : null, 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] }));
+            jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider }), controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group, i) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i === 0 ? null : jsx_runtime_1.jsx("div", { style: controlsEffectsDivider }), renderSectionHeader(group.label), group.id === 'transforms' ? renderTransformControls() : null, group.rows.map(renderRow)] }, group.id))) })) : null, 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/MobilePanel.js

@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
+const InlineAction_1 = require("./InlineAction");
 const portals_1 = require("./Menu/portals");
 const CancelButton_1 = require("./NewComposition/CancelButton");
 const container = {
@@ -25,13 +26,18 @@ const buttonContainer = {
     alignItems: 'center',
     display: 'flex',
     justifyContent: 'flex-end',
+    paddingRight: 8,
 };
 const button = {
-    height: 20,
-    width: 20,
+    height: 16,
+    width: 16,
+    flexShrink: 0,
+};
+const renderCloseIcon = (color) => {
+    return jsx_runtime_1.jsx(CancelButton_1.CancelIcon, { style: { ...button, color } });
 };
 function MobilePanel({ children, onClose, }) {
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     return react_dom_1.default.createPortal(jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: buttonContainer, children: jsx_runtime_1.jsx(CancelButton_1.CancelButton, { style: button, onPress: onClose }) }), children] }), (0, portals_1.getPortal)(currentZIndex));
+            jsx_runtime_1.jsx("div", { style: buttonContainer, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClose, renderAction: renderCloseIcon, title: "Close sidebar" }) }), children] }), (0, portals_1.getPortal)(currentZIndex));
 }

package/dist/components/Modals.js

@@ -26,14 +26,13 @@ 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 KeyframeSettingsModal_1 = require("./Timeline/KeyframeSettingsModal");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = ({ readOnlyStudio }) => {
     var _a;
     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 === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), 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 &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), 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 === '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 === '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 })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };

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

@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react';
 import React from 'react';
+export declare const CancelIcon: React.FC<SVGProps<SVGSVGElement>>;
 export declare const CancelButton: React.FC<SVGProps<SVGSVGElement> & {
     readonly onPress: () => void;
 }>;

package/dist/components/NewComposition/CancelButton.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CancelButton = void 0;
+exports.CancelButton = exports.CancelIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
 const z_index_1 = require("../../state/z-index");
@@ -14,8 +14,12 @@ const style = {
     justifyContent: 'center',
     alignItems: 'center',
 };
+const CancelIcon = (props) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }) }));
+};
+exports.CancelIcon = CancelIcon;
 const CancelButton = ({ onPress, ...props }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }) }) }));
+    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: jsx_runtime_1.jsx(exports.CancelIcon, { ...props }) }));
 };
 exports.CancelButton = CancelButton;