@remotion/studio 4.0.507 → 4.0.508

package/dist/FastRefreshProvider.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FastRefreshProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
+const react_dom_1 = require("react-dom");
 const fast_refresh_context_1 = require("./fast-refresh-context");
 const FastRefreshProvider = ({ children }) => {
     const [fastRefreshes, setFastRefreshes] = (0, react_1.useState)(0);
@@ -11,15 +13,17 @@ const FastRefreshProvider = ({ children }) => {
         setManualRefreshes((i) => i + 1);
     }, []);
     (0, react_1.useEffect)(() => {
-        if (typeof __webpack_module__ !== 'undefined') {
-            if (__webpack_module__.hot) {
-                __webpack_module__.hot.addStatusHandler((status) => {
-                    if (status === 'idle') {
-                        setFastRefreshes((i) => i + 1);
-                    }
-                });
-            }
-        }
+        const onReactRefreshFinished = () => {
+            // Commit consumers and their layout effects before the browser paints
+            // the refreshed composition with stale node-path statuses.
+            (0, react_dom_1.flushSync)(() => {
+                setFastRefreshes((i) => i + 1);
+            });
+        };
+        window.addEventListener(studio_shared_1.REACT_REFRESH_FINISHED_EVENT, onReactRefreshFinished);
+        return () => {
+            window.removeEventListener(studio_shared_1.REACT_REFRESH_FINISHED_EVENT, onReactRefreshFinished);
+        };
     }, []);
     const value = (0, react_1.useMemo)(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
     return (jsx_runtime_1.jsx(fast_refresh_context_1.FastRefreshContext.Provider, { value: value, children: children }));

package/dist/components/CodingAgentIcon.d.ts

@@ -1,4 +1,6 @@
+import type { DefaultCodingAgent } from '@remotion/renderer';
 import React from 'react';
 export declare const CodingAgentIcon: React.FC<{
-    readonly iconDataUrl: string | null;
+    readonly codingAgentId: DefaultCodingAgent | null;
+    readonly size: number;
 }>;

package/dist/components/CodingAgentIcon.js

@@ -3,15 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodingAgentIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const apps_1 = require("../icons/apps");
-const iconStyle = {
-    flexShrink: 0,
-    height: 18,
-    width: 18,
-};
-const CodingAgentIcon = ({ iconDataUrl }) => {
-    if (iconDataUrl === null) {
-        return jsx_runtime_1.jsx(apps_1.AppsIcon, { height: 18, width: 18 });
+const CodingAgentIcon = ({ codingAgentId, size }) => {
+    if (codingAgentId === null) {
+        return jsx_runtime_1.jsx(apps_1.AppsIcon, { height: size, width: size });
     }
-    return (jsx_runtime_1.jsx("img", { alt: "", "aria-hidden": true, draggable: false, src: iconDataUrl, style: iconStyle }));
+    return (jsx_runtime_1.jsx("img", { alt: "", "aria-hidden": true, "data-coding-agent-icon": codingAgentId, draggable: false, src: `/api/app-icon/coding-agent/${codingAgentId}.png`, style: { flexShrink: 0, height: size, width: size } }));
 };
 exports.CodingAgentIcon = CodingAgentIcon;

package/dist/components/ConfigureDefaultEditorModal.js

@@ -125,7 +125,7 @@ const DefaultEditorSettings = () => {
                 id: codingAgent.id,
                 keyHint: null,
                 label: (jsx_runtime_1.jsxs("span", { style: appLabel, children: [
-                        jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { iconDataUrl: codingAgent.iconDataUrl }), jsx_runtime_1.jsx("span", { style: appName, children: codingAgent.name })
+                        jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { codingAgentId: codingAgent.id, size: 18 }), jsx_runtime_1.jsx("span", { style: appName, children: codingAgent.name })
                     ] })),
                 leftItem: selectedCodingAgent === codingAgent.id ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 onClick: () => {

package/dist/components/ContextMenu.d.ts

@@ -14,5 +14,6 @@ export declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuPro
 export declare const ContextMenuForTarget: React.FC<{
     readonly triggerRef: React.RefObject<HTMLElement | SVGElement | null>;
     readonly getItems: ContextMenuItemsFactory;
+    readonly onOpenChange?: (open: boolean) => void;
 }>;
 export {};

package/dist/components/ContextMenu.js

@@ -236,15 +236,26 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, getItems, style =
             jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { menuTreeId: menuTreeIdRef.current, sizeSource: ref, currentZIndex: currentZIndex, onHide: onHide, opened: opened })) : null] }));
 });
 exports.ContextMenu.displayName = 'ContextMenu';
-const ContextMenuForTarget = ({ triggerRef, getItems }) => {
+const ContextMenuForTarget = ({ triggerRef, getItems, onOpenChange = undefined }) => {
     const idRef = (0, react_1.useRef)(nextContextMenuId++);
     const menuTreeIdRef = (0, react_1.useRef)((0, menu_tree_context_1.getNextMenuTreeId)());
     const invocationRef = (0, react_1.useRef)(0);
+    const isOpenRef = (0, react_1.useRef)(false);
     const getItemsRef = (0, react_1.useRef)(getItems);
+    const onOpenChangeRef = (0, react_1.useRef)(onOpenChange);
     getItemsRef.current = getItems;
+    onOpenChangeRef.current = onOpenChange;
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const [body, setBody] = (0, react_1.useState)(null);
     const { currentZIndex } = (0, z_index_1.useZIndex)();
+    const setOpenLifecycleState = (0, react_1.useCallback)((open) => {
+        var _a;
+        if (isOpenRef.current === open) {
+            return;
+        }
+        isOpenRef.current = open;
+        (_a = onOpenChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onOpenChangeRef, open);
+    }, []);
     (0, react_1.useEffect)(() => {
         // Access document.body after mount so importing this component stays safe
         // in DOM-less test environments.
@@ -260,8 +271,21 @@ const ContextMenuForTarget = ({ triggerRef, getItems }) => {
             e.preventDefault();
             e.stopPropagation();
             const currentInvocation = ++invocationRef.current;
-            const values = await (0, exports.resolveContextMenuItems)(getItemsRef.current, e);
+            setOpenLifecycleState(true);
+            let values;
+            try {
+                values = await (0, exports.resolveContextMenuItems)(getItemsRef.current, e);
+            }
+            catch (err) {
+                if (currentInvocation === invocationRef.current) {
+                    setOpenLifecycleState(false);
+                }
+                throw err;
+            }
             if (currentInvocation !== invocationRef.current || values === null) {
+                if (currentInvocation === invocationRef.current) {
+                    setOpenLifecycleState(false);
+                }
                 return false;
             }
             notifyContextMenuOpened(idRef.current);
@@ -277,16 +301,19 @@ const ContextMenuForTarget = ({ triggerRef, getItems }) => {
         return () => {
             current.removeEventListener('contextmenu', onClick);
         };
-    }, [triggerRef]);
+    }, [setOpenLifecycleState, triggerRef]);
     (0, react_1.useEffect)(() => {
         const invocation = invocationRef;
         return () => {
             invocation.current++;
+            setOpenLifecycleState(false);
         };
-    }, []);
+    }, [setOpenLifecycleState]);
     const onHide = (0, react_1.useCallback)(() => {
+        invocationRef.current++;
+        setOpenLifecycleState(false);
         setOpened({ type: 'not-open' });
-    }, []);
+    }, [setOpenLifecycleState]);
     (0, react_1.useEffect)(() => {
         const onOtherContextMenuOpened = (event) => {
             if (event.detail === idRef.current) {

package/dist/components/EditorContent.js

@@ -4,6 +4,7 @@ exports.EditorContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const transform_3d_mode_1 = require("../state/transform-3d-mode");
 const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const MenuToolbar_1 = require("./MenuToolbar");
@@ -38,8 +39,8 @@ const EditorContent = ({ readOnlyStudio, children }) => {
     const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: null, minAntiFlexerSize: null, children: [
             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));
-    return (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [
-                jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {}), jsx_runtime_1.jsx(TimelineKeyframeDragState_1.TimelineKeyframeDragStateProvider, { children: content })
-            ] }) }));
+    return (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsx(transform_3d_mode_1.Transform3DModeStateProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [
+                    jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {}), jsx_runtime_1.jsx(TimelineKeyframeDragState_1.TimelineKeyframeDragStateProvider, { children: content })
+                ] }) }) }));
 };
 exports.EditorContent = EditorContent;

package/dist/components/InlineAction.d.ts

@@ -3,8 +3,9 @@ export type RenderInlineAction = (color: string) => React.ReactNode;
 export type InlineActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'style'> & {
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
     readonly renderAction: RenderInlineAction;
+    readonly hoveredColor?: string;
     readonly unhoveredColor?: string;
     readonly variant: 'compact' | null;
     readonly style?: React.CSSProperties;
 };
-export declare const InlineAction: ({ renderAction, onClick, disabled, title, unhoveredColor, variant, style: customStyle, className, ...buttonProps }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineAction: ({ renderAction, onClick, disabled, title, hoveredColor, unhoveredColor, variant, style: customStyle, className, ...buttonProps }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineAction.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const hoverable_1 = require("../helpers/hoverable");
 const z_index_1 = require("../state/z-index");
-const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, variant, style: customStyle, className, ...buttonProps }) => {
+const InlineAction = ({ renderAction, onClick, disabled, title, hoveredColor = colors_1.WHITE, unhoveredColor = colors_1.LIGHT_TEXT, variant, style: customStyle, className, ...buttonProps }) => {
     var _a;
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const style = (0, react_1.useMemo)(() => {
@@ -27,11 +27,11 @@ const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor =
                     ? colors_1.TRANSPARENT
                     : (0, colors_1.getBackgroundFromHoverState)({ hovered: true, selected: false }),
                 idleColor: unhoveredColor,
-                hoverColor: disabled ? unhoveredColor : colors_1.WHITE,
+                hoverColor: disabled ? unhoveredColor : hoveredColor,
             }),
             ...customStyle,
         };
-    }, [customStyle, disabled, unhoveredColor, variant]);
+    }, [customStyle, disabled, hoveredColor, unhoveredColor, variant]);
     return (jsx_runtime_1.jsx("button", { ...buttonProps, type: "button", className: className
             ? `${hoverable_1.HOVERABLE_CLASS_NAME} ${className}`
             : hoverable_1.HOVERABLE_CLASS_NAME, disabled: disabled, onClick: onClick, style: style, tabIndex: tabIndex, title: title, "aria-label": (_a = buttonProps['aria-label']) !== null && _a !== void 0 ? _a : title, children: renderAction(colors_1.CURRENT_COLOR) }));

package/dist/components/InspectorLocationCopy.js

@@ -64,6 +64,6 @@ const InspectorLocationCopy = ({ children, location, name, openInEditorLocation
                     opacity: showAction ? 1 : 0,
                     pointerEvents: showAction ? 'auto' : 'none',
                 }, children: [
-                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { contextForAgents: contextForAgents, location: openInEditorLocation }), contextForAgents ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy context for agents" })) : null] })) : null] }));
+                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, contextForAgents: contextForAgents, location: openInEditorLocation }), contextForAgents ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy context for agents" })) : null] })) : null] }));
 };
 exports.InspectorLocationCopy = InspectorLocationCopy;

package/dist/components/InspectorOpenInEditor.d.ts

@@ -4,4 +4,5 @@ export declare const InspectorOpenInEditor: React.FC<{
     readonly contextForAgents?: string | null;
     readonly location: OriginalPosition | null;
     readonly label?: React.ReactNode;
+    readonly locationType: 'file' | 'folder' | null;
 }>;

package/dist/components/InspectorOpenInEditor.js

@@ -13,6 +13,7 @@ const z_index_1 = require("../state/z-index");
 const get_open_in_menu_items_1 = require("./get-open-in-menu-items");
 const InlineDropdown_1 = require("./InlineDropdown");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const actions_1 = require("./RenderQueue/actions");
 const use_default_editor_info_1 = require("./use-default-editor-info");
 const splitButton = {
     alignItems: 'center',
@@ -40,13 +41,14 @@ const mainButtonBase = {
     whiteSpace: 'nowrap',
 };
 const editorButtonIconSize = 18;
-const InspectorOpenInEditor = ({ contextForAgents = null, label, location }) => {
+const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locationType }) => {
     var _a;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
+    const ignorePointerEnter = (0, react_1.useRef)(false);
     const editorPickerAvailable = (0, use_default_editor_info_1.canUseEditorPicker)(previewServerState.type === 'connected');
     const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(editorPickerAvailable);
     const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(editorPickerAvailable);
@@ -79,6 +81,13 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location }) =>
         event.stopPropagation();
         openWithEditor(null).catch(() => undefined);
     }, [openWithEditor]);
+    const onDropdownOpenChange = (0, react_1.useCallback)((open) => {
+        setDropdownOpened(open);
+        if (!open) {
+            ignorePointerEnter.current = true;
+            setHovered(false);
+        }
+    }, []);
     const mainHovered = hovered && !dropdownOpened;
     const mainButtonStyle = (0, react_1.useMemo)(() => {
         return {
@@ -113,6 +122,8 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location }) =>
             editorInfo,
             excludeCodingAgentId: null,
             excludeEditorId: preferredEditorId,
+            fileManagerDisabled: !(location === null || location === void 0 ? void 0 : location.source),
+            folder: locationType === 'folder',
             onConfigureApps: () => {
                 var _a;
                 var _b;
@@ -128,11 +139,34 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location }) =>
             onOpenInEditor: (editorId) => {
                 openWithEditor(editorId).catch(() => undefined);
             },
+            onOpenInFileExplorer: () => {
+                if (!(location === null || location === void 0 ? void 0 : location.source)) {
+                    return;
+                }
+                (0, actions_1.openInFileExplorer)({ directory: location.source }).catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+                });
+            },
+            onOpenInTerminal: (terminalId) => {
+                if (!(location === null || location === void 0 ? void 0 : location.source) || locationType !== 'folder') {
+                    return;
+                }
+                (0, open_in_editor_1.openInTerminal)(terminalId, location.source)
+                    .then((response) => {
+                    if (!response.success) {
+                        (0, NotificationCenter_1.showNotification)('Could not open terminal', 2000);
+                    }
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not open terminal: ${err.message}`, 2000);
+                });
+            },
         });
     }, [
         codingAgentInfo,
         editorInfo,
         location,
+        locationType,
         openWithCodingAgent,
         openWithEditor,
         preferredEditorId,
@@ -141,9 +175,16 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location }) =>
     if (!editorPickerAvailable) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { style: splitButton, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
+    return (jsx_runtime_1.jsxs("div", { style: splitButton, onPointerEnter: () => {
+            if (!ignorePointerEnter.current) {
+                setHovered(true);
+            }
+        }, onPointerLeave: () => {
+            ignorePointerEnter.current = false;
+            setHovered(false);
+        }, children: [
             jsx_runtime_1.jsxs("button", { "aria-label": `Open in ${editorName}`, disabled: !canOpenDefault, onClick: onOpenDefault, style: mainButtonStyle, tabIndex: tabIndex, title: `Open in ${editorName}`, type: "button", children: [label, jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: preferredEditorId, size: editorButtonIconSize })
-                ] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { onOpenChange: setDropdownOpened, renderAction: renderDropdownAction, style: dropdownStyle, title: "Open in another app", unhoveredColor: dropdownForegroundColor, values: menuItems, variant: "compact" })
+                ] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { onOpenChange: onDropdownOpenChange, renderAction: renderDropdownAction, style: dropdownStyle, title: "Open in another app", unhoveredColor: dropdownForegroundColor, values: menuItems, variant: "compact" })
         ] }));
 };
 exports.InspectorOpenInEditor = InspectorOpenInEditor;

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -119,7 +119,7 @@ const AlignmentControls = ({ track }) => {
                 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 [currentX, currentY, currentZ] = (0, timeline_translate_utils_1.parseTranslate)(currentTranslate);
         const { x: newX, y: newY } = (0, alignment_controls_1.computeAlignedTranslate)({
             direction,
             elementRect,
@@ -128,7 +128,7 @@ const AlignmentControls = ({ track }) => {
             currentTranslateY: currentY,
             scale,
         });
-        const newValue = (0, timeline_translate_utils_1.serializeTranslate)(newX, newY);
+        const newValue = (0, timeline_translate_utils_1.serializeTranslate)([newX, newY, currentZ]);
         const undoLabels = {
             left: 'Align left',
             'center-h': 'Align center horizontally',

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionInspector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const browse_elements_1 = require("../../icons/browse-elements");
 const frame_1 = require("../../icons/frame");
@@ -123,9 +124,10 @@ const CompositionVisualControlsSection = ({ readOnlyStudio }) => {
         ] }));
 };
 const CompositionInspector = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
             jsx_runtime_1.jsxs("div", { style: styles_1.inspectorOverviewSection, children: [
-                    jsx_runtime_1.jsx(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(CompositionMetadata_1.CompositionMetadata, { compositionId: composition.id, disabled: readOnlyStudio, stack: composition.stack })
+                    jsx_runtime_1.jsx(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(CompositionMetadata_1.CompositionMetadata, { compositionId: composition.id, disabled: readOnlyStudio || previewServerState.type !== 'connected', stack: composition.stack })
                 ] }), jsx_runtime_1.jsx(CompositionDefaultPropsSection, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps }), jsx_runtime_1.jsx(CompositionVisualControlsSection, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CompositionActions, { readOnlyStudio: readOnlyStudio })
         ] }));
 };

package/dist/components/InspectorPanel/styles.js

@@ -43,7 +43,7 @@ exports.sectionHeader = {
     fontSize: 12,
     fontWeight: 'bold',
     lineHeight: '24px',
-    padding: `4px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    padding: `4px 0 4px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
     userSelect: 'none',
 };
 exports.inspectorSectionBody = {

package/dist/components/InspectorSequenceSection.js

@@ -10,9 +10,11 @@ const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const border_radius_1 = require("../icons/border-radius");
+const cube_1 = require("../icons/cube");
 const fullscreen_1 = require("../icons/fullscreen");
 const plus_1 = require("../icons/plus");
 const modals_1 = require("../state/modals");
+const transform_3d_mode_1 = require("../state/transform-3d-mode");
 const AssetFileIcon_1 = require("./AssetFileIcon");
 const InlineAction_1 = require("./InlineAction");
 const InlineCaptionInspector_1 = require("./InlineCaptionInspector");
@@ -27,6 +29,8 @@ const TimelineAssetField_1 = require("./Timeline/TimelineAssetField");
 const TimelineExpandedRow_1 = require("./Timeline/TimelineExpandedRow");
 const TimelineRowLayoutContext_1 = require("./Timeline/TimelineRowLayoutContext");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
+const transform_3d_mode_2 = require("./Timeline/transform-3d-mode");
+const Transform3DModeContext_1 = require("./Timeline/Transform3DModeContext");
 const use_timeline_expanded_tree_1 = require("./Timeline/use-timeline-expanded-tree");
 const use_select_asset_1 = require("./use-select-asset");
 const container = {
@@ -56,6 +60,11 @@ const borderRadiusToggleIcon = {
     height: 15,
     width: 15,
 };
+const transform3DToggleIcon = {
+    flexShrink: 0,
+    height: 14,
+    width: 14,
+};
 const collapsibleSectionHeaderButton = {
     appearance: 'none',
     backgroundColor: 'transparent',
@@ -239,6 +248,9 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
     const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(loadInspectorCollapsedKeys);
     const [sectionExpansionOverrides, setSectionExpansionOverrides] = (0, react_1.useState)(loadInspectorSectionExpansionOverrides);
     const [automaticSectionExpansion, setAutomaticSectionExpansion] = (0, react_1.useState)({});
+    const { manuallyEnabledSequenceKeys, setManuallyEnabled } = (0, react_1.useContext)(transform_3d_mode_1.Transform3DModeStateContext);
+    const sequenceKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(nodePathInfo);
+    const manuallyEnabled3DTransform = manuallyEnabledSequenceKeys.has(sequenceKey);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -326,6 +338,22 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
     const layoutGroup = controlGroups.find((group) => group.id === 'layout');
     const controlGroupsWithoutLayout = controlGroups.filter((group) => group.id !== 'layout');
     const sequencePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePathInfo.sequenceSubscriptionKey);
+    const automaticallyEnabled3DTransform = (0, react_1.useMemo)(() => {
+        return [
+            'style.translate',
+            'style.scale',
+            'style.rotate',
+            'style.transformOrigin',
+        ].some((fieldKey) => (0, transform_3d_mode_2.propStatusHas3DTransformValue)({
+            fieldKey,
+            propStatus: sequencePropStatuses === null || sequencePropStatuses === void 0 ? void 0 : sequencePropStatuses[fieldKey],
+            runtimeValue: runtimeValues[fieldKey],
+        }));
+    }, [runtimeValues, sequencePropStatuses]);
+    const show3DTransformControls = automaticallyEnabled3DTransform || manuallyEnabled3DTransform;
+    const onToggle3DTransform = (0, react_1.useCallback)(() => {
+        setManuallyEnabled(sequenceKey, !manuallyEnabled3DTransform);
+    }, [manuallyEnabled3DTransform, sequenceKey, setManuallyEnabled]);
     const { schema } = sequence.controls;
     const getControlGroupActivity = (0, react_1.useCallback)((group) => {
         if (!(0, inspector_section_collapse_1.isSmartCollapsibleInspectorGroup)(group.id)) {
@@ -476,6 +504,11 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             : borderRadiusUsesShorthand
                 ? 'Use individual corner radii'
                 : 'Use one border radius value', renderAction: (color) => borderRadiusUsesShorthand ? (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: borderRadiusToggleIcon })) : (jsx_runtime_1.jsx(border_radius_1.BorderRadiusIcon, { color: color, style: borderRadiusToggleIcon })) })) : null;
+    const transform3DAction = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: automaticallyEnabled3DTransform, onClick: onToggle3DTransform, title: automaticallyEnabled3DTransform
+            ? '3D controls are required by the current transform values'
+            : show3DTransformControls
+                ? 'Hide 3D transform controls'
+                : 'Show 3D transform controls', hoveredColor: show3DTransformControls ? colors_1.BLUE : undefined, unhoveredColor: show3DTransformControls ? colors_1.BLUE : colors_1.LIGHT_TEXT, renderAction: (color) => (jsx_runtime_1.jsx(cube_1.CubeIcon, { color: color, style: transform3DToggleIcon })) }));
     const effectsHeader = (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
             jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
     const renderRow = ({ node, depth }) => {
@@ -487,16 +520,15 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         if (collapsible) {
             return (jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader, { action: group.id === 'border-radius' && expanded ? borderRadiusAction : null, expanded: expanded, label: group.label, onToggle: () => toggleControlGroup(group) }));
         }
-        return (jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderRow, children: jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: group.label }) }));
+        return (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
+                jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: group.label }), group.id === 'transforms' ? transform3DAction : null] }));
     };
     if (controlRows.length === 0 &&
         !showEffectsSection &&
         inlineCaptions === null) {
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Controls", children: jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" }) }) }));
     }
-    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(group), children: isControlGroupExpanded(group) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [group.id === 'transforms'
-                                    ? renderTransformControls()
-                                    : null, group.rows.map(renderRow)] })) : null }, group.id))) })) : null, inlineCaptions ? (jsx_runtime_1.jsx(InlineCaptionInspector_1.InlineCaptionInspector, { captions: inlineCaptions, controls: sequence.controls, nodePath: nodePathInfo.sequenceSubscriptionKey, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(layoutGroup), children: isControlGroupExpanded(layoutGroup)
+    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(group), children: isControlGroupExpanded(group) ? (group.id === 'transforms' ? (jsx_runtime_1.jsxs(Transform3DModeContext_1.Transform3DModeContext.Provider, { value: show3DTransformControls, children: [renderTransformControls(), group.rows.map(renderRow)] })) : (group.rows.map(renderRow))) : null }, group.id))) })) : null, inlineCaptions ? (jsx_runtime_1.jsx(InlineCaptionInspector_1.InlineCaptionInspector, { captions: inlineCaptions, controls: sequence.controls, nodePath: nodePathInfo.sequenceSubscriptionKey, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(layoutGroup), children: isControlGroupExpanded(layoutGroup)
                             ? layoutGroup.rows.map(renderRow)
                             : null }) })) : null] }) }));
 };

package/dist/components/MenuBuildIndicator.js

@@ -48,7 +48,7 @@ const MenuBuildIndicator = ({ mobileLayout }) => {
         };
     }, []);
     return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [
-            jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation, locationType: "folder" }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })
                 ] })) : null) : isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner }))] }));
 };

package/dist/components/PlayPause.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const PlayPause: React.FC<{
+export declare const PlayPause: React.NamedExoticComponent<{
     readonly playbackRate: number;
     readonly loop: boolean;
     readonly bufferStateDelayInMilliseconds: number;

package/dist/components/PlayPause.js

@@ -1,9 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlayPause = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
@@ -26,12 +59,10 @@ const iconButton = {
     height: 14,
     width: 14,
 };
-const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted, hideNavigationControls, }) => {
-    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
-    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
-    const { play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayerMethods();
-    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+const browserMediaControlsBehavior = {
+    mode: 'register-media-session',
+};
+const PlaybackManager = ({ playbackRate, loop, muted, inFrame, outFrame, getCurrentFrame }) => {
     player_1.PlayerInternals.usePlayback({
         loop,
         playbackRate,
@@ -39,11 +70,28 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted,
         inFrame,
         outFrame,
         getCurrentFrame,
-        browserMediaControlsBehavior: {
-            mode: 'register-media-session',
-        },
+        browserMediaControlsBehavior,
         muted,
     });
+    return null;
+};
+const PlayPauseInner = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted, hideNavigationControls, }) => {
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
+    const { play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, isPlaying, } = player_1.PlayerInternals.usePlayerMethods();
+    const [playing, setPlaying] = (0, react_1.useState)(isPlaying);
+    (0, react_1.useEffect)(() => {
+        const onPlay = () => setPlaying(true);
+        const onPause = () => setPlaying(false);
+        setPlaying(isPlaying());
+        emitter.addEventListener('play', onPlay);
+        emitter.addEventListener('pause', onPause);
+        return () => {
+            emitter.removeEventListener('play', onPlay);
+            emitter.removeEventListener('pause', onPause);
+        };
+    }, [emitter, isPlaying]);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     (0, react_1.useEffect)(() => {
         if (isStill) {
@@ -195,6 +243,7 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted,
             stopped = true;
         };
     }, [bufferStateDelayInMilliseconds, emitter]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }))] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(PlaybackManager, { loop: loop, playbackRate: playbackRate, muted: muted, inFrame: inFrame, outFrame: outFrame, getCurrentFrame: getCurrentFrame }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }))] }));
 };
-exports.PlayPause = PlayPause;
+exports.PlayPause = react_1.default.memo(PlayPauseInner);