@remotion/studio 4.0.165 → 4.0.167

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @remotion/studio@4.0.164 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.166 build /Users/jonathanburger/remotion/packages/studio
 > bun --env-file=../.env.bundle bundle.ts
 

package/dist/api/focus-default-props-path.d.ts

@@ -0,0 +1,7 @@
+import type { JSONPath } from '../components/RenderModal/SchemaEditor/zod-types';
+export declare const focusDefaultPropsPath: ({ path, scrollBehavior, }: {
+    path: JSONPath;
+    scrollBehavior?: ScrollBehavior | undefined;
+}) => {
+    success: boolean;
+};

package/dist/api/focus-default-props-path.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.focusDefaultPropsPath = void 0;
+const scroll_to_default_props_path_1 = require("../components/RenderModal/SchemaEditor/scroll-to-default-props-path");
+const focusDefaultPropsPath = ({ path, scrollBehavior, }) => {
+    const currentlyActive = document.querySelector(`.${scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME}`);
+    if (currentlyActive !== null) {
+        currentlyActive.classList.remove(scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME);
+    }
+    const query = document.querySelector(`.${scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_CLASSNAME}[data-json-path="${path.join('.')}"]`);
+    if (query === null) {
+        return {
+            success: false,
+        };
+    }
+    query.scrollIntoView({ behavior: scrollBehavior });
+    query.classList.add(scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME);
+    return {
+        success: true,
+    };
+};
+exports.focusDefaultPropsPath = focusDefaultPropsPath;

package/dist/api/reevaluate-composition.d.ts

@@ -0,0 +1 @@
+export declare const reevaluateComposition: () => void;

package/dist/api/reevaluate-composition.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reevaluateComposition = void 0;
+const remotion_1 = require("remotion");
+const reevaluateComposition = () => {
+    var _a;
+    (_a = remotion_1.Internals.resolveCompositionsRef.current) === null || _a === void 0 ? void 0 : _a.reloadCurrentlySelectedComposition();
+};
+exports.reevaluateComposition = reevaluateComposition;

package/dist/api/trigger-calculate-metadata.d.ts

@@ -0,0 +1 @@
+export declare const reevaluateComposition: () => void;

package/dist/api/trigger-calculate-metadata.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reevaluateComposition = void 0;
+const remotion_1 = require("remotion");
+const reevaluateComposition = () => {
+    var _a;
+    (_a = remotion_1.Internals.resolveCompositionsRef.current) === null || _a === void 0 ? void 0 : _a.reloadCurrentlySelectedComposition();
+};
+exports.reevaluateComposition = reevaluateComposition;

package/dist/components/CompositionContextButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const CompositionContextButton: React.FC<{
+    readonly visible: boolean;
+    readonly values: ComboboxValue[];
+}>;

package/dist/components/CompositionContextButton.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionContextButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const ellipsis_1 = require("../icons/ellipsis");
+const InlineDropdown_1 = require("./InlineDropdown");
+const CompositionContextButton = ({ visible, values }) => {
+    const iconStyle = (0, react_1.useMemo)(() => {
+        return {
+            style: {
+                height: 12,
+            },
+        };
+    }, []);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return (0, jsx_runtime_1.jsx)(ellipsis_1.EllipsisIcon, { fill: color, svgProps: iconStyle });
+    }, [iconStyle]);
+    if (!visible || connectionStatus !== 'connected') {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, values: values });
+};
+exports.CompositionContextButton = CompositionContextButton;

package/dist/components/CompositionSelector.js

@@ -19,7 +19,10 @@ const container = {
     backgroundColor: colors_1.BACKGROUND,
 };
 const getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
-    initial.push((0, persist_open_folders_1.openFolderKey)(initialFolderName, parentFolderName));
+    initial.push((0, persist_open_folders_1.openFolderKey)({
+        folderName: initialFolderName,
+        parentName: parentFolderName,
+    }));
     const { name, parent } = (0, create_folder_tree_1.splitParentIntoNameAndParent)(parentFolderName);
     if (!name) {
         return initial;
@@ -36,7 +39,7 @@ const CompositionSelector = () => {
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         setFoldersExpanded((p) => {
             var _a;
-            const key = (0, persist_open_folders_1.openFolderKey)(folderName, parentName);
+            const key = (0, persist_open_folders_1.openFolderKey)({ folderName, parentName });
             const prev = (_a = p[key]) !== null && _a !== void 0 ? _a : false;
             const foldersExpandedState = {
                 ...p,
@@ -58,31 +61,31 @@ const CompositionSelector = () => {
                     return;
                 }
                 setFoldersExpanded((previousState) => {
-                    var _a, _b, _c;
                     const foldersExpandedState = {
                         ...previousState,
                     };
-                    let currentFolder = folderName;
-                    let currentParentName = parentFolderName;
-                    while (currentFolder) {
-                        if (currentParentName === null || currentParentName === void 0 ? void 0 : currentParentName.includes('/')) {
-                            const splittedParentName = currentParentName.split('/');
-                            currentParentName = (_a = splittedParentName.pop()) !== null && _a !== void 0 ? _a : null;
-                        }
-                        const key = (0, persist_open_folders_1.openFolderKey)(currentFolder, currentParentName);
-                        foldersExpandedState[key] = true;
-                        const parentFolder = folders.find((f) => {
-                            return f.name === currentParentName && currentParentName;
-                        });
-                        currentFolder = (_b = parentFolder === null || parentFolder === void 0 ? void 0 : parentFolder.name) !== null && _b !== void 0 ? _b : null;
-                        currentParentName = (_c = parentFolder === null || parentFolder === void 0 ? void 0 : parentFolder.parent) !== null && _c !== void 0 ? _c : null;
+                    const currentFolder = folderName;
+                    const currentParentName = parentFolderName;
+                    const key = (0, persist_open_folders_1.openFolderKey)({
+                        folderName: currentFolder,
+                        parentName: currentParentName,
+                    });
+                    const splitted = key.split('/');
+                    for (let i = 0; i < splitted.length - 1; i++) {
+                        const allExceptLast = i === 0
+                            ? (0, persist_open_folders_1.openFolderKey)({
+                                folderName: splitted.filter((s) => s !== 'no-parent')[0],
+                                parentName: null,
+                            })
+                            : splitted.slice(0, i + 1).join('/');
+                        foldersExpandedState[allExceptLast] = true;
                     }
                     (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
                     return foldersExpandedState;
                 });
             },
         };
-    }, [compositions, folders]);
+    }, [compositions]);
     const items = (0, react_1.useMemo)(() => {
         return (0, create_folder_tree_1.createFolderTree)(compositions, folders, foldersExpanded);
     }, [compositions, folders, foldersExpanded]);

package/dist/components/CompositionSelectorItem.d.ts

@@ -13,10 +13,10 @@ export type CompositionSelectorItemType = {
     expanded: boolean;
 };
 export declare const CompositionSelectorItem: React.FC<{
-    item: CompositionSelectorItemType;
-    currentComposition: string | null;
-    tabIndex: number;
-    selectComposition: (c: AnyComposition, push: boolean) => void;
-    toggleFolder: (folderName: string, parentName: string | null) => void;
-    level: number;
+    readonly item: CompositionSelectorItemType;
+    readonly currentComposition: string | null;
+    readonly tabIndex: number;
+    readonly selectComposition: (c: AnyComposition, push: boolean) => void;
+    readonly toggleFolder: (folderName: string, parentName: string | null) => void;
+    readonly level: number;
 }>;

package/dist/components/CompositionSelectorItem.js

@@ -9,6 +9,7 @@ const folder_1 = require("../icons/folder");
 const still_1 = require("../icons/still");
 const video_1 = require("../icons/video");
 const modals_1 = require("../state/modals");
+const CompositionContextButton_1 = require("./CompositionContextButton");
 const ContextMenu_1 = require("./ContextMenu");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
@@ -176,6 +177,6 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                     })
                     : null] }));
     }
-    return ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: contextMenu, children: (0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", children: (0, jsx_runtime_1.jsxs)("a", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyPress: onKeyPress, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.composition.id }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition }) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: contextMenu, children: (0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", children: (0, jsx_runtime_1.jsxs)("a", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyPress: onKeyPress, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.composition.id }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered }), (0, jsx_runtime_1.jsx)(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition })] }) }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/components/ContextMenu.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ComboboxValue } from './NewComposition/ComboBox';
 export declare const ContextMenu: React.FC<{
-    children: React.ReactNode;
-    values: ComboboxValue[];
+    readonly children: React.ReactNode;
+    readonly values: ComboboxValue[];
 }>;

package/dist/components/GlobalPropsEditorUpdateButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const GlobalPropsEditorUpdateButton: React.FC<{
+    readonly compositionId: string;
+    readonly currentDefaultProps: Record<string, unknown>;
+}>;

package/dist/components/GlobalPropsEditorUpdateButton.js

@@ -0,0 +1,59 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalPropsEditorUpdateButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const save_default_props_1 = require("../api/save-default-props");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const SchemaResetButton_1 = require("./RenderModal/SchemaEditor/SchemaResetButton");
+const SchemaSaveButton_1 = require("./RenderModal/SchemaEditor/SchemaSaveButton");
+const container = {
+    display: 'inline-block',
+    flexDirection: 'row',
+};
+const GlobalPropsEditorUpdateButton = ({ compositionId, currentDefaultProps }) => {
+    const [disabled, setDisabled] = react_1.default.useState(false);
+    const onClicked = (0, react_1.useCallback)(() => {
+        setDisabled(true);
+        (0, save_default_props_1.saveDefaultProps)({
+            compositionId,
+            defaultProps: () => currentDefaultProps,
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Cannot update default props: ${err.stack}`, 2000);
+        })
+            .finally(() => {
+            setDisabled(true);
+        });
+    }, [compositionId, currentDefaultProps]);
+    const onReset = (0, react_1.useCallback)(() => {
+        window.remotion_ignoreFastRefreshUpdate = null;
+        window.dispatchEvent(new CustomEvent(remotion_1.Internals.PROPS_UPDATED_EXTERNALLY));
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), (0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { disabled: disabled, onClick: onClicked })] }));
+};
+exports.GlobalPropsEditorUpdateButton = GlobalPropsEditorUpdateButton;

package/dist/components/InlineAction.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 export type RenderInlineAction = (color: string) => React.ReactNode;
-export declare const InlineAction: React.FC<{
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
-    disabled?: boolean;
-    renderAction: RenderInlineAction;
-    title?: string;
-}>;
+export type InlineActionProps = {
+    readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
+    readonly disabled?: boolean;
+    readonly renderAction: RenderInlineAction;
+    readonly title?: string;
+};
+export declare const InlineAction: ({ renderAction, onClick, disabled, title, }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineAction.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
-const InlineAction = ({ renderAction, onClick, disabled, title }) => {
+const InlineAction = ({ renderAction, onClick, disabled, title, }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const onPointerEnter = (0, react_1.useCallback)(() => {

package/dist/components/InlineDropdown.d.ts

@@ -0,0 +1,5 @@
+import { type InlineActionProps } from './InlineAction';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const InlineDropdown: ({ values, ...props }: Omit<InlineActionProps, "onClick"> & {
+    readonly values: ComboboxValue[];
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineDropdown.js

@@ -0,0 +1,85 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineDropdown = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
+const mobile_layout_1 = require("../helpers/mobile-layout");
+const noop_1 = require("../helpers/noop");
+const z_index_1 = require("../state/z-index");
+const InlineAction_1 = require("./InlineAction");
+const portals_1 = require("./Menu/portals");
+const styles_1 = require("./Menu/styles");
+const MenuContent_1 = require("./NewComposition/MenuContent");
+const InlineDropdown = ({ values, ...props }) => {
+    const ref = (0, react_1.useRef)(null);
+    const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    const onClick = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpened({ type: 'open', left: e.clientX, top: e.clientY });
+    }, []);
+    const spaceToBottom = (0, react_1.useMemo)(() => {
+        if (size && opened.type === 'open') {
+            return size.windowSize.height - opened.top;
+        }
+        return 0;
+    }, [opened, size]);
+    const spaceToTop = (0, react_1.useMemo)(() => {
+        if (size && opened.type === 'open') {
+            return opened.top;
+        }
+        return 0;
+    }, [opened, size]);
+    const portalStyle = (0, react_1.useMemo)(() => {
+        if (opened.type === 'not-open') {
+            return;
+        }
+        if (!size) {
+            return;
+        }
+        const spaceToRight = size.windowSize.width - size.left;
+        const spaceToLeft = size.left + size.width;
+        const minSpaceRequired = isMobileLayout
+            ? styles_1.MAX_MOBILE_MENU_WIDTH
+            : styles_1.MAX_MENU_WIDTH;
+        const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
+        const canOpenOnLeft = spaceToLeft >= minSpaceRequired;
+        const canOpenOnRight = spaceToRight >= minSpaceRequired;
+        const horizontalLayout = canOpenOnRight ? 'left' : 'right';
+        return {
+            ...styles_1.menuContainerTowardsTop,
+            ...(verticalLayout === 'top'
+                ? {
+                    top: opened.top,
+                }
+                : {
+                    bottom: size.windowSize.height - opened.top,
+                }),
+            ...(horizontalLayout === 'left'
+                ? {
+                    left: opened.left,
+                }
+                : {
+                    right: canOpenOnLeft ? size.windowSize.width - opened.left : 0,
+                }),
+        };
+    }, [opened, size, isMobileLayout, spaceToTop, spaceToBottom]);
+    const onHide = (0, react_1.useCallback)(() => {
+        setOpened({ type: 'not-open' });
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, ...props }) }), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
+};
+exports.InlineDropdown = InlineDropdown;

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

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
+}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#f1c40f";
 export declare const RemotionInput: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/OptionsPanel.js

@@ -4,19 +4,14 @@ exports.OptionsPanel = exports.optionsSidebarTabs = exports.persistSelectedOptio
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
+const GlobalPropsEditorUpdateButton_1 = require("./GlobalPropsEditorUpdateButton");
 const DataEditor_1 = require("./RenderModal/DataEditor");
 const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
 const RenderQueue_1 = require("./RenderQueue");
 const RendersTab_1 = require("./RendersTab");
 const Tabs_1 = require("./Tabs");
-const circle = {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-};
 const localStorageKey = 'remotion.sidebarPanel';
 const getSelectedPanel = (readOnlyStudio) => {
     if (readOnlyStudio) {
@@ -66,14 +61,6 @@ const OptionsPanel = ({ readOnlyStudio }) => {
         };
     }, []);
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const circleStyle = (0, react_1.useMemo)(() => {
-        const onTabColor = saving ? colors_1.LIGHT_TEXT : 'white';
-        return {
-            ...circle,
-            backgroundColor: panel === 'input-props' ? onTabColor : colors_1.LIGHT_TEXT,
-            cursor: 'help',
-        };
-    }, [panel, saving]);
     const composition = (0, react_1.useMemo)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return null;
@@ -85,15 +72,11 @@ const OptionsPanel = ({ readOnlyStudio }) => {
         }
         return null;
     }, [canvasContent, compositions]);
-    const saveToolTip = (0, react_1.useMemo)(() => {
-        return process.env.KEYBOARD_SHORTCUTS_ENABLED
-            ? `Save using ${ShortcutHint_1.cmdOrCtrlCharacter}+S`
-            : 'There are unsaved changes';
-    }, []);
     const setDefaultProps = (0, react_1.useCallback)((newProps) => {
         if (composition === null) {
             return;
         }
+        window.remotion_ignoreFastRefreshUpdate = null;
         updateProps({
             id: composition.id,
             defaultProps: composition.defaultProps,
@@ -122,6 +105,6 @@ const OptionsPanel = ({ readOnlyStudio }) => {
             window.removeEventListener(remotion_1.Internals.PROPS_UPDATED_EXTERNALLY, reset);
         };
     }, [reset]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [composition ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)("div", { title: saveToolTip, style: circleStyle })) : null] })) : null, readOnlyStudio ? null : ((0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' }))] }) }), panel === `input-props` && composition ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving, readOnlyStudio: readOnlyStudio }, composition.id)) : readOnlyStudio ? null : ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {}))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [composition ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)(GlobalPropsEditorUpdateButton_1.GlobalPropsEditorUpdateButton, { compositionId: composition.id, currentDefaultProps: currentDefaultProps })) : null] })) : null, readOnlyStudio ? null : ((0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' }))] }) }), panel === `input-props` && composition ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving, readOnlyStudio: readOnlyStudio }, composition.id)) : readOnlyStudio ? null : ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {}))] }));
 };
 exports.OptionsPanel = OptionsPanel;

package/dist/components/RenderModal/SchemaEditor/SchemaEditor.js

@@ -12,6 +12,7 @@ const SchemaErrorMessages_1 = require("./SchemaErrorMessages");
 const ZodObjectEditor_1 = require("./ZodObjectEditor");
 const deep_equal_1 = require("./deep-equal");
 const local_state_1 = require("./local-state");
+const scroll_to_default_props_path_1 = require("./scroll-to-default-props-path");
 const scrollable = {
     display: 'flex',
     flexDirection: 'column',
@@ -81,6 +82,6 @@ const SchemaEditor = ({ schema, unsavedDefaultProps, setValue, zodValidationResu
     if (typeName !== z.ZodFirstPartyTypeKind.ZodObject) {
         return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.TopLevelZodValue, { typeReceived: typeName });
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(local_state_1.RevisionContext.Provider, { value: revisionState, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { discriminatedUnionReplacement: null, unsavedValue: unsavedDefaultProps, setValue: setValue, jsonPath: [], schema: schema, savedValue: savedDefaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: true }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: scroll_to_default_props_path_1.defaultPropsEditorScrollableAreaRef, style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(local_state_1.RevisionContext.Provider, { value: revisionState, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { discriminatedUnionReplacement: null, unsavedValue: unsavedDefaultProps, setValue: setValue, jsonPath: [], schema: schema, savedValue: savedDefaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: true }) }) }));
 };
 exports.SchemaEditor = SchemaEditor;

package/dist/components/RenderModal/SchemaEditor/SchemaLabel.js

@@ -9,6 +9,7 @@ const InlineRemoveButton_1 = require("../InlineRemoveButton");
 const SchemaResetButton_1 = require("./SchemaResetButton");
 const SchemaSaveButton_1 = require("./SchemaSaveButton");
 const get_schema_label_1 = require("./get-schema-label");
+const scroll_to_default_props_path_1 = require("./scroll-to-default-props-path");
 const compactStyles = {
     fontSize: 15,
     color: colors_1.LIGHT_TEXT,
@@ -40,7 +41,7 @@ const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton
         setClickableButtonHovered(false);
     }, []);
     const labelContent = ((0, jsx_runtime_1.jsxs)("span", { style: labelStyle, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), " ", suffix ? suffix : null] }));
-    return ((0, jsx_runtime_1.jsxs)("div", { style: compactStyles, children: [handleClick ? (
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compactStyles, className: scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_CLASSNAME, "data-json-path": jsonPath.join('.'), children: [handleClick ? (
             // Minus the padding that a button has (user agent padding-line-start)
             (0, jsx_runtime_1.jsx)("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', marginLeft: -6 }, children: labelContent })) : (labelContent), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), isDefaultValue ? null : (0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? ((0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave, disabled: disableSave })) : null, onRemove ? (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
 };

package/dist/components/RenderModal/SchemaEditor/scroll-to-default-props-path.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const DEFAULT_PROPS_PATH_CLASSNAME = "__remotion-default-props-editor-label";
+export declare const DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME = "__remotion-default-props-editor-label-active";
+export declare const defaultPropsEditorScrollableAreaRef: React.RefObject<HTMLDivElement>;

package/dist/components/RenderModal/SchemaEditor/scroll-to-default-props-path.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultPropsEditorScrollableAreaRef = exports.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME = exports.DEFAULT_PROPS_PATH_CLASSNAME = void 0;
+const react_1 = __importDefault(require("react"));
+exports.DEFAULT_PROPS_PATH_CLASSNAME = '__remotion-default-props-editor-label';
+exports.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME = '__remotion-default-props-editor-label-active';
+exports.defaultPropsEditorScrollableAreaRef = react_1.default.createRef();

package/dist/components/RenderModal/SchemaEditor/scroll-to-path-editor.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/RendersTab.d.ts

@@ -1,6 +1,6 @@
 import type { MouseEventHandler } from 'react';
 import React from 'react';
 export declare const RendersTab: React.FC<{
-    selected: boolean;
-    onClick: MouseEventHandler<HTMLButtonElement>;
+    readonly selected: boolean;
+    readonly onClick: MouseEventHandler<HTMLDivElement>;
 }>;

package/dist/components/Tabs/index.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 export declare const Tabs: React.FC<{
-    children: React.ReactNode;
-    style?: React.CSSProperties;
+    readonly children: React.ReactNode;
+    readonly style?: React.CSSProperties;
 }>;
 export declare const Tab: React.FC<{
-    children: React.ReactNode;
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
-    style?: React.CSSProperties;
-    selected: boolean;
+    readonly children: React.ReactNode;
+    readonly onClick: React.MouseEventHandler<HTMLDivElement>;
+    readonly style?: React.CSSProperties;
+    readonly selected: boolean;
 }>;

package/dist/components/Tabs/index.js

@@ -51,6 +51,6 @@ const Tab = ({ children, onClick, style, selected }) => {
         boxShadow: selected ? 'none' : undefined,
         ...style,
     }), [hovered, selected, style]);
-    return ((0, jsx_runtime_1.jsx)("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: definiteStyle, role: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
 };
 exports.Tab = Tab;