@remotion/studio 4.0.506 → 4.0.508

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -37,9 +37,9 @@ exports.TimelineSequenceItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
+const are_sequence_node_path_infos_equal_1 = require("../../helpers/are-sequence-node-path-infos-equal");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
-const format_file_location_1 = require("../../helpers/format-file-location");
 const get_sequence_double_click_action_1 = require("../../helpers/get-sequence-double-click-action");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
@@ -48,6 +48,7 @@ const use_keybinding_1 = require("../../helpers/use-keybinding");
 const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const modals_1 = require("../../state/modals");
 const timeline_sequence_hover_1 = require("../../state/timeline-sequence-hover");
+const transform_3d_mode_1 = require("../../state/transform-3d-mode");
 const call_api_1 = require("../call-api");
 const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
@@ -65,6 +66,7 @@ const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-i
 const imperative_state_1 = require("./imperative-state");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_asset_link_1 = require("./timeline-asset-link");
+const TimelineDuplicateCount_1 = require("./TimelineDuplicateCount");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
@@ -72,7 +74,7 @@ const TimelineMediaInfo_1 = require("./TimelineMediaInfo");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceName_1 = require("./TimelineSequenceName");
-const use_open_sequence_in_editor_1 = require("./use-open-sequence-in-editor");
+const use_open_sequence_in_apps_1 = require("./use-open-sequence-in-apps");
 const use_rename_sequence_1 = require("./use-rename-sequence");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
 const use_timeline_expanded_tree_1 = require("./use-timeline-expanded-tree");
@@ -95,18 +97,29 @@ const effectDropHighlight = {
 };
 const SEQUENCE_REORDER_MIME_TYPE = 'application/remotion-sequence-reorder';
 let currentSequenceDrag = null;
-const TimelineSequenceExpandArrow = ({ disabled, isExpanded, nodePathInfo, onToggleExpand, sequence }) => {
-    const { filteredTree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
+const TimelineSequenceExpandArrowInner = ({ disabled, isExpanded, nodePathInfo, sequence }) => {
+    const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
+    const hasExpandableContent = (0, use_timeline_expanded_tree_1.useTimelineSequenceHasExpandableContent)({
         sequence,
         nodePathInfo,
-        includeTextContent: false,
-        includeSourceControls: false,
     });
-    if (filteredTree.length === 0) {
+    const onToggleExpand = (0, react_1.useCallback)(() => toggleTrack(nodePathInfo), [nodePathInfo, toggleTrack]);
+    if (!hasExpandableContent) {
         return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});
     }
     return (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: disabled }));
 };
+const areTimelineSequenceExpandArrowPropsEqual = (first, second) => {
+    var _a, _b, _c, _d;
+    return (first.disabled === second.disabled &&
+        first.isExpanded === second.isExpanded &&
+        ((_a = first.sequence.controls) === null || _a === void 0 ? void 0 : _a.schema) === ((_b = second.sequence.controls) === null || _b === void 0 ? void 0 : _b.schema) &&
+        ((_c = first.sequence.controls) === null || _c === void 0 ? void 0 : _c.runtimeValues) ===
+            ((_d = second.sequence.controls) === null || _d === void 0 ? void 0 : _d.runtimeValues) &&
+        first.sequence.effects === second.sequence.effects &&
+        (0, are_sequence_node_path_infos_equal_1.areSequenceNodePathInfosEqual)(first.nodePathInfo, second.nodePathInfo));
+};
+const TimelineSequenceExpandArrow = react_1.default.memo(TimelineSequenceExpandArrowInner, areTimelineSequenceExpandArrowPropsEqual);
 const sequenceReorderWrapper = {
     position: 'relative',
 };
@@ -177,14 +190,13 @@ const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
 };
 const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, }) => {
     var _a, _b;
-    var _c, _d;
+    var _c, _d, _e, _f;
     const nodePath = (_c = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
     const { hovered, onPointerEnter, onPointerLeave } = (0, timeline_sequence_hover_1.useTimelineSequenceHover)(nodePathInfo);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
-    const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { isHighestContext } = (0, use_keybinding_1.useKeybinding)();
@@ -197,11 +209,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     const [isRenaming, setIsRenaming] = (0, react_1.useState)(false);
     const [sequenceDropIndicator, setSequenceDropIndicator] = (0, react_1.useState)(null);
     const [sequenceDropRejection, setSequenceDropRejection] = (0, react_1.useState)(null);
-    const { canOpenInEditor, editorInfo, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
-    const fileLocation = (0, react_1.useMemo)(() => (0, format_file_location_1.formatFileLocation)({
-        location: originalLocation,
-        root: window.remotion_cwd,
-    }), [originalLocation]);
+    const { canOpenInEditor, canConfigureApps, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -226,16 +234,18 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     const timelineDisplayName = sequence.displayName === '' && connectedCompositions.length === 1
         ? connectedCompositions[0].id
         : displayName;
+    const numberOfHiddenDuplicates = Math.max(0, ((_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _d !== void 0 ? _d : 1) - 1);
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
-    const parentId = (_d = sequence.parent) !== null && _d !== void 0 ? _d : null;
+    const parentId = (_e = sequence.parent) !== null && _e !== void 0 ? _e : null;
     const canReorderSequence = previewInteractive &&
         Boolean(nodePath && nodePathKey && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) &&
         (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) === 1;
     const canHandleSequenceDrag = previewInteractive;
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const deleteDisabled = (0, react_1.useMemo)(() => !previewInteractive || !sequence.controls || !canDeleteFromSource, [previewInteractive, sequence.controls, canDeleteFromSource]);
-    const duplicateDisabled = deleteDisabled;
+    const isProgrammaticallyDuplicated = ((_f = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _f !== void 0 ? _f : 1) > 1;
+    const duplicateDisabled = deleteDisabled || isProgrammaticallyDuplicated;
     const disableInteractivityDisabled = !previewInteractive ||
         !sequence.showInTimeline ||
         !nodePath ||
@@ -471,12 +481,6 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
         ? sequence.src
         : null;
     const isExpanded = previewConnected && nodePathInfo !== null && getIsExpanded(nodePathInfo);
-    const onToggleExpand = (0, react_1.useCallback)(() => {
-        if (nodePathInfo === null) {
-            return;
-        }
-        toggleTrack(nodePathInfo);
-    }, [nodePathInfo, toggleTrack]);
     const codeHiddenStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.hidden;
     const runtimeHidden = (0, use_runtime_values_1.useRuntimeValue)(sequence.controls, 'hidden');
     const isItemHidden = (0, react_1.useMemo)(() => {
@@ -655,6 +659,8 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
             });
         },
     });
+    const canRotate = nodePathInfo !== null;
+    const { setManuallyEnabled } = (0, react_1.useContext)(transform_3d_mode_1.Transform3DModeStateContext);
     const onAddEffect = (0, react_1.useCallback)(() => {
         if (!canAddEffect ||
             previewServerState.type !== 'connected' ||
@@ -688,6 +694,20 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
             key: selected_outline_types_1.cropFieldKeys.left,
         }, undefined, undefined, { reveal: true });
     }, [canCrop, nodePathInfo, selectItem]);
+    const onRotate = (0, react_1.useCallback)(() => {
+        if (!canRotate || !nodePathInfo) {
+            return;
+        }
+        setManuallyEnabled((0, TimelineSelection_1.getTimelineSequenceSelectionKey)(nodePathInfo), true);
+        selectItem({
+            type: 'sequence-prop',
+            nodePathInfo: {
+                ...nodePathInfo,
+                auxiliaryKeys: ['controls', selected_outline_types_1.rotateFieldKey],
+            },
+            key: selected_outline_types_1.rotateFieldKey,
+        }, undefined, undefined, { reveal: true });
+    }, [canRotate, nodePathInfo, selectItem, setManuallyEnabled]);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         var _a;
         if (selectable) {
@@ -708,15 +728,28 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo: mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null,
             canOpenInEditor,
+            codingAgentInfo,
             deleteDisabled,
             disableInteractivityDisabled,
             duplicateDisabled,
             editorInfo,
-            fileLocation,
             includeSourceEditItems: (0, interactivity_enabled_1.isStudioInteractivityEnabled)(),
+            isProgrammaticallyDuplicated,
+            onConfigureApps: canConfigureApps
+                ? () => {
+                    var _a;
+                    var _b;
+                    setSelectedModal({
+                        type: 'settings',
+                        initialTab: 'apps',
+                        initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
+                    });
+                }
+                : null,
             onDeleteSequenceFromSource,
             onDisableSequenceInteractivity,
             onDuplicateSequenceFromSource,
+            openInCodingAgent,
             openInEditor,
             originalLocation,
             selectAsset,
@@ -745,7 +778,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
                                 type: 'item',
                                 id: 'crop',
                                 keyHint: null,
-                                label: 'Crop',
+                                label: isProgrammaticallyDuplicated ? 'Crop all' : 'Crop',
                                 leftItem: null,
                                 disabled: false,
                                 onClick: onCrop,
@@ -753,9 +786,31 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
                                 subMenu: null,
                                 value: 'crop',
                             },
+                        ]
+                        : []),
+                    ...(canRotate
+                        ? [
+                            {
+                                type: 'item',
+                                id: 'rotate',
+                                keyHint: null,
+                                label: isProgrammaticallyDuplicated
+                                    ? 'Rotate all'
+                                    : 'Rotate',
+                                leftItem: null,
+                                disabled: false,
+                                onClick: onRotate,
+                                quickSwitcherLabel: null,
+                                subMenu: null,
+                                value: 'rotate',
+                            },
+                        ]
+                        : []),
+                    ...(canCrop || canRotate
+                        ? [
                             {
                                 type: 'divider',
-                                id: 'crop-divider',
+                                id: 'transform-controls-divider',
                             },
                         ]
                         : []),
@@ -780,23 +835,28 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     }, [
         canAddEffect,
         canCrop,
+        canRotate,
+        canConfigureApps,
         canOpenInEditor,
         canRenameThisSequence,
+        codingAgentInfo,
         deleteDisabled,
         disableInteractivityDisabled,
         duplicateDisabled,
         editorInfo,
-        fileLocation,
+        isProgrammaticallyDuplicated,
         mediaSrc,
         nodePath,
         nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects,
         onAddEffect,
         onCrop,
+        onRotate,
         onDeleteSequenceFromSource,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onRenameSequence,
         onSelect,
+        openInCodingAgent,
         openInEditor,
         originalLocation,
         previewInteractive,
@@ -806,6 +866,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
         selectable,
         sequence,
         sequenceFrameOffset,
+        setSelectedModal,
         setPropStatuses,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
@@ -867,9 +928,11 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: (0, TimelineSelection_1.getTimelineColor)(false, false), composition: connectedCompositions[0], style: connectedCompositionIconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), numberOfHiddenDuplicates > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineDuplicateCount_1.TimelineDuplicateCount, { count: numberOfHiddenDuplicates })
+                    ] })) : null, mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -45,6 +45,7 @@ const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const get_sequence_prop_reset_changes_1 = require("./get-sequence-prop-reset-changes");
 const save_sequence_prop_1 = require("./save-sequence-prop");
+const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldRowContent_1 = require("./TimelineFieldRowContent");
 const TimelineKeyframeControls_1 = require("./TimelineKeyframeControls");
@@ -53,6 +54,7 @@ const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const fieldRowBase = {};
 const inlineSourceFieldRow = {
     alignItems: 'stretch',
@@ -229,6 +231,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
     const propStatusesForOverride = remotion_1.Internals.getPropStatusesCtx(visualModePropStatuses, nodePath);
     const propStatus = (_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
     const dragOverrideValue = (0, react_1.useMemo)(() => {
@@ -248,10 +251,10 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 keyframable,
             })) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
     const style = (0, react_1.useMemo)(() => {
-        return field.typeName === 'text-content'
+        return (0, timeline_field_row_layout_1.isTimelineFieldStacked)({ field, transform3DMode })
             ? fieldRowBase
             : { ...fieldRowBase, height: field.rowHeight };
-    }, [field.rowHeight, field.typeName]);
+    }, [field, transform3DMode]);
     const canResetToDefault = (0, react_1.useMemo)(() => {
         if (!propStatus || propStatus.status === 'computed') {
             return false;

package/dist/components/Timeline/TimelineTrack.js

@@ -44,6 +44,7 @@ const TimelineExpandedTrackKeyframes_1 = require("./TimelineExpandedTrackKeyfram
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequence_1 = require("./TimelineSequence");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const emptyConnectedCompositions = [];
 const TimelineTrackUnmemoized = ({ track }) => {
     var _a;
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
@@ -61,7 +62,7 @@ const TimelineTrackUnmemoized = ({ track }) => {
         previewServerConnected &&
         getIsExpanded(track.nodePathInfo);
     return (jsx_runtime_1.jsxs("div", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: [
-            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
+            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : emptyConnectedCompositions, nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
                 ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }));
 };
 exports.TimelineTrack = react_1.default.memo(TimelineTrackUnmemoized);

package/dist/components/Timeline/TimelineTransformOriginField.js

@@ -8,21 +8,33 @@ const timeline_field_display_utils_1 = require("./timeline-field-display-utils")
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const transform_origin_utils_1 = require("./transform-origin-utils");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const leftDraggerStyle = {
+    paddingBottom: 2,
     paddingLeft: 0,
+    paddingTop: 2,
 };
 const rightDraggerStyle = {
+    paddingBottom: 2,
     paddingRight: 0,
+    paddingTop: 2,
 };
 const containerStyle = {
     display: 'flex',
     gap: 4,
 };
 const TimelineTransformOriginField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
+    var _a;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
+    const [dragZ, setDragZ] = (0, react_1.useState)(null);
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
     const parsed = (0, react_1.useMemo)(() => (0, transform_origin_utils_1.parseTransformOrigin)(effectiveValue), [effectiveValue]);
     const percent = (0, react_1.useMemo)(() => (parsed === null ? null : (0, transform_origin_utils_1.parsedTransformOriginToPercent)(parsed)), [parsed]);
+    const parsedZ = (0, react_1.useMemo)(() => (parsed === null || parsed === void 0 ? void 0 : parsed.z) === null || (parsed === null || parsed === void 0 ? void 0 : parsed.z) === undefined
+        ? null
+        : (0, transform_origin_utils_1.parseTransformOriginZ)(parsed.z), [parsed === null || parsed === void 0 ? void 0 : parsed.z]);
+    const show3D = transform3DMode || (parsedZ !== null && parsedZ.value !== 0);
     const configuredStep = field.fieldSchema.type === 'transform-origin'
         ? field.fieldSchema.step
         : undefined;
@@ -37,14 +49,19 @@ const TimelineTransformOriginField = ({ field, propStatus, effectiveValue, onSav
             value: v,
         });
     }, [field.fieldSchema]);
-    const serialize = (0, react_1.useCallback)((x, y) => {
+    const serialize = (0, react_1.useCallback)((x, y, z) => {
         var _a;
+        if (z === void 0) { z = (_a = parsed === null || parsed === void 0 ? void 0 : parsed.z) !== null && _a !== void 0 ? _a : null; }
         return (0, transform_origin_utils_1.serializeTransformOrigin)({
             uv: (0, transform_origin_utils_1.transformOriginPercentToUv)([x, y]),
-            z: (_a = parsed === null || parsed === void 0 ? void 0 : parsed.z) !== null && _a !== void 0 ? _a : null,
+            z,
             decimalPlaces,
         });
     }, [decimalPlaces, parsed === null || parsed === void 0 ? void 0 : parsed.z]);
+    const serializeZ = (0, react_1.useCallback)((value) => {
+        var _a;
+        return `${(0, timeline_field_utils_1.normalizeTimelineNumber)(value)}${(_a = parsedZ === null || parsedZ === void 0 ? void 0 : parsedZ.unit) !== null && _a !== void 0 ? _a : 'px'}`;
+    }, [parsedZ === null || parsedZ === void 0 ? void 0 : parsedZ.unit]);
     const onXChange = (0, react_1.useCallback)((newVal) => {
         if (percent === null) {
             return;
@@ -127,11 +144,68 @@ const TimelineTransformOriginField = ({ field, propStatus, effectiveValue, onSav
             }
         }
     }, [dragX, onSave, percent, propStatus.codeValue, serialize]);
+    const onZChange = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        setDragZ(newVal);
+        onDragValueChange(serialize(dragX !== null && dragX !== void 0 ? dragX : percent[0], dragY !== null && dragY !== void 0 ? dragY : percent[1], serializeZ(newVal)));
+    }, [dragX, dragY, onDragValueChange, percent, serialize, serializeZ]);
+    const onZChangeEnd = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        const value = serialize(dragX !== null && dragX !== void 0 ? dragX : percent[0], dragY !== null && dragY !== void 0 ? dragY : percent[1], serializeZ(newVal));
+        if (value !== propStatus.codeValue) {
+            onSave(value).finally(() => {
+                setDragZ(null);
+                onDragEnd();
+            });
+        }
+        else {
+            setDragZ(null);
+            onDragEnd();
+        }
+    }, [
+        dragX,
+        dragY,
+        onDragEnd,
+        onSave,
+        percent,
+        propStatus.codeValue,
+        serialize,
+        serializeZ,
+    ]);
+    const onZTextChange = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        const parsedValue = Number(newVal);
+        if (!Number.isNaN(parsedValue)) {
+            const value = serialize(dragX !== null && dragX !== void 0 ? dragX : percent[0], dragY !== null && dragY !== void 0 ? dragY : percent[1], serializeZ(parsedValue));
+            if (value !== propStatus.codeValue) {
+                setDragZ(parsedValue);
+                onSave(value).finally(() => setDragZ(null));
+            }
+        }
+    }, [
+        dragX,
+        dragY,
+        onSave,
+        percent,
+        propStatus.codeValue,
+        serialize,
+        serializeZ,
+    ]);
     if (percent === null) {
         return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "unsupported origin" });
     }
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : percent[0], style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : percent[1], style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces })
-        ] }));
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : percent[0], buttonStyle: leftDraggerStyle, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, "aria-label": "Transform origin X" }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : percent[1], buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, "aria-label": "Transform origin Y" }), show3D ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: (_a = dragZ !== null && dragZ !== void 0 ? dragZ : parsedZ === null || parsedZ === void 0 ? void 0 : parsedZ.value) !== null && _a !== void 0 ? _a : 0, buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onZChange, onValueChangeEnd: onZChangeEnd, onTextChange: onZTextChange, min: -Infinity, max: Infinity, step: step, formatter: (value) => {
+                            var _a;
+                            return `${value}${(_a = parsedZ === null || parsedZ === void 0 ? void 0 : parsedZ.unit) !== null && _a !== void 0 ? _a : 'px'}`;
+                        }, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, "aria-label": "Transform origin Z" })
+                ] })) : null] }));
 };
 exports.TimelineTransformOriginField = TimelineTransformOriginField;

package/dist/components/Timeline/TimelineTranslateField.js

@@ -7,11 +7,16 @@ const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const timeline_translate_utils_1 = require("./timeline-translate-utils");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const leftDraggerStyle = {
+    paddingBottom: 2,
     paddingLeft: 0,
+    paddingTop: 2,
 };
 const rightDraggerStyle = {
+    paddingBottom: 2,
     paddingRight: 0,
+    paddingTop: 2,
 };
 const containerStyle = {
     display: 'flex',
@@ -19,9 +24,13 @@ const containerStyle = {
 };
 const translateDragSensitivity = 3;
 const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
+    var _a;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
-    const [codeX, codeY] = (0, react_1.useMemo)(() => (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
+    const [dragZ, setDragZ] = (0, react_1.useState)(null);
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
+    const [codeX, codeY, codeZ] = (0, react_1.useMemo)(() => (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
+    const show3D = transform3DMode || (codeZ !== null && codeZ !== 0);
     const configuredStep = field.fieldSchema.type === 'translate' ? field.fieldSchema.step : undefined;
     const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
     const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
@@ -34,15 +43,18 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             value: v,
         });
     }, [field.fieldSchema]);
+    const serialize = (0, react_1.useCallback)((x, y, z = dragZ !== null && dragZ !== void 0 ? dragZ : codeZ) => {
+        return (0, timeline_translate_utils_1.serializeTranslate)([x, y, z], decimalPlaces);
+    }, [codeZ, decimalPlaces, dragZ]);
     // --- X callbacks ---
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY, decimalPlaces));
-    }, [onDragValueChange, dragY, codeY, decimalPlaces]);
+        onDragValueChange(serialize(newVal, currentY));
+    }, [codeY, dragY, onDragValueChange, serialize]);
     const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY, decimalPlaces);
+        const newStr = serialize(newVal, currentY);
         if (newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragX(null);
@@ -53,12 +65,12 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             setDragX(null);
             onDragEnd();
         }
-    }, [dragY, codeY, decimalPlaces, propStatus, onSave, onDragEnd]);
+    }, [codeY, dragY, onDragEnd, onSave, propStatus, serialize]);
     const onXTextChange = (0, react_1.useCallback)((newVal) => {
         const parsed = Number(newVal);
         if (!Number.isNaN(parsed)) {
             const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(parsed, currentY, decimalPlaces);
+            const newStr = serialize(parsed, currentY);
             if (newStr !== propStatus.codeValue) {
                 setDragX(parsed);
                 onSave(newStr).finally(() => {
@@ -66,16 +78,16 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 });
             }
         }
-    }, [propStatus, dragY, codeY, decimalPlaces, onSave]);
+    }, [codeY, dragY, onSave, propStatus, serialize]);
     // --- Y callbacks ---
     const onYChange = (0, react_1.useCallback)((newVal) => {
         setDragY(newVal);
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal, decimalPlaces));
-    }, [onDragValueChange, dragX, codeX, decimalPlaces]);
+        onDragValueChange(serialize(currentX, newVal));
+    }, [codeX, dragX, onDragValueChange, serialize]);
     const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal, decimalPlaces);
+        const newStr = serialize(currentX, newVal);
         if (newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragY(null);
@@ -86,12 +98,12 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             setDragY(null);
             onDragEnd();
         }
-    }, [dragX, codeX, decimalPlaces, propStatus, onSave, onDragEnd]);
+    }, [codeX, dragX, onDragEnd, onSave, propStatus, serialize]);
     const onYTextChange = (0, react_1.useCallback)((newVal) => {
         const parsed = Number(newVal);
         if (!Number.isNaN(parsed)) {
             const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, parsed, decimalPlaces);
+            const newStr = serialize(currentX, parsed);
             if (newStr !== propStatus.codeValue) {
                 setDragY(parsed);
                 onSave(newStr).finally(() => {
@@ -99,9 +111,37 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 });
             }
         }
-    }, [propStatus, onSave, dragX, codeX, decimalPlaces]);
+    }, [codeX, dragX, onSave, propStatus, serialize]);
+    const onZChange = (0, react_1.useCallback)((newVal) => {
+        setDragZ(newVal);
+        onDragValueChange(serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, newVal));
+    }, [codeX, codeY, dragX, dragY, onDragValueChange, serialize]);
+    const onZChangeEnd = (0, react_1.useCallback)((newVal) => {
+        const newStr = serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, newVal);
+        if (newStr !== propStatus.codeValue) {
+            onSave(newStr).finally(() => {
+                setDragZ(null);
+                onDragEnd();
+            });
+        }
+        else {
+            setDragZ(null);
+            onDragEnd();
+        }
+    }, [codeX, codeY, dragX, dragY, onDragEnd, onSave, propStatus, serialize]);
+    const onZTextChange = (0, react_1.useCallback)((newVal) => {
+        const parsed = Number(newVal);
+        if (!Number.isNaN(parsed)) {
+            const newStr = serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, parsed);
+            if (newStr !== propStatus.codeValue) {
+                setDragZ(parsed);
+                onSave(newStr).finally(() => setDragZ(null));
+            }
+        }
+    }, [codeX, codeY, dragX, dragY, onSave, propStatus, serialize]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity })
-        ] }));
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, buttonStyle: leftDraggerStyle, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity, "aria-label": "Offset X" }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity, "aria-label": "Offset Y" }), show3D ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: (_a = dragZ !== null && dragZ !== void 0 ? dragZ : codeZ) !== null && _a !== void 0 ? _a : 0, buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onZChange, onValueChangeEnd: onZChangeEnd, onTextChange: onZTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity, "aria-label": "Offset Z" })
+                ] })) : null] }));
 };
 exports.TimelineTranslateField = TimelineTranslateField;

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

@@ -0,0 +1 @@
+export declare const Transform3DModeContext: import("react").Context<boolean>;

package/dist/components/Timeline/Transform3DModeContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Transform3DModeContext = void 0;
+const react_1 = require("react");
+exports.Transform3DModeContext = (0, react_1.createContext)(false);