@remotion/studio 4.0.484 → 4.0.486

package/dist/components/FpsCounter.js

@@ -4,8 +4,9 @@ exports.FpsCounter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const label = {
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 15,
     fontFamily: 'Arial, Helvetica, sans-serif',
     whiteSpace: 'nowrap',
@@ -58,7 +59,7 @@ const FpsCounter = ({ playbackSpeed }) => {
         const expectedFps = Math.abs(playbackSpeed) * videoConfig.fps;
         return {
             ...label,
-            color: fps < expectedFps * 0.9 ? 'red' : 'white',
+            color: fps < expectedFps * 0.9 ? colors_1.RED : colors_1.WHITE,
         };
     }, [fps, playbackSpeed, videoConfig]);
     if (fps === 0) {

package/dist/components/FullscreenToggle.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
+const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const canvas_ref_1 = require("../state/canvas-ref");
 const ControlButton_1 = require("./ControlButton");
@@ -43,6 +44,6 @@ const FullScreenToggle = () => {
             f.unregister();
         };
     }, [keybindings, onClick]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 448 512", fill: "#fff", children: jsx_runtime_1.jsx("path", { d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 448 512", fill: colors_1.WHITE_HEX, children: jsx_runtime_1.jsx("path", { d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z" }) }) }));
 };
 exports.FullScreenToggle = FullScreenToggle;

package/dist/components/GlobalKeybindings.js

@@ -106,17 +106,6 @@ const GlobalKeybindings = ({ readOnlyStudio }) => {
                 event.preventDefault();
             }
         };
-        const nKey = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: 'n',
-            callback: () => {
-                (0, NotificationCenter_1.showNotification)(`To make a new composition, right-click an existing one and select "Duplicate"`, 5000);
-            },
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
         const cmdKKey = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'k',
@@ -200,7 +189,6 @@ const GlobalKeybindings = ({ readOnlyStudio }) => {
             keepRegisteredWhenNotHighestContext: false,
         });
         return () => {
-            nKey.unregister();
             for (const sequencePropKey of sequencePropKeys) {
                 sequencePropKey.unregister();
             }

package/dist/components/InlineAction.js

@@ -18,7 +18,7 @@ const InlineAction = ({ renderAction, onClick, disabled, title, }) => {
         return {
             border: 'none',
             background: disabled
-                ? 'transparent'
+                ? colors_1.TRANSPARENT
                 : (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
             height: 24,
             width: 24,
@@ -30,6 +30,6 @@ const InlineAction = ({ renderAction, onClick, disabled, title, }) => {
             pointerEvents: disabled ? 'none' : 'auto',
         };
     }, [disabled, hovered]);
-    return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, children: renderAction(hovered ? 'white' : colors_1.LIGHT_TEXT) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, children: renderAction(hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT) }));
 };
 exports.InlineAction = InlineAction;

package/dist/components/InlineCompositionName.d.ts

@@ -0,0 +1,7 @@
+import type * as React from 'react';
+import type { _InternalTypes } from 'remotion';
+export declare const InlineCompositionName: React.FC<{
+    readonly compositionId: string;
+    readonly stack: string | null;
+    readonly compositions: _InternalTypes['AnyComposition'][];
+}>;

package/dist/components/InlineCompositionName.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineCompositionName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const resolved_stack_to_symbolicated_1 = require("../helpers/resolved-stack-to-symbolicated");
+const use_rename_composition_1 = require("../helpers/use-rename-composition");
+const InlineEditableTitle_1 = require("./InlineEditableTitle");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
+const InlineCompositionName = ({ compositionId, stack, compositions }) => {
+    const canRename = !window.remotion_isReadOnlyStudio;
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
+    const symbolicatedStack = (0, react_1.useMemo)(() => (0, resolved_stack_to_symbolicated_1.resolvedStackToSymbolicated)(resolvedLocation), [resolvedLocation]);
+    const { getValidationMessage, renameComposition } = (0, use_rename_composition_1.useRenameComposition)({
+        compositions,
+        currentId: compositionId,
+        newId: compositionId,
+    });
+    const commit = (0, react_1.useCallback)((newId) => {
+        if (newId === compositionId) {
+            return;
+        }
+        const compNameErrMessage = getValidationMessage(newId);
+        if (compNameErrMessage) {
+            (0, NotificationCenter_1.showNotification)(compNameErrMessage, 2000);
+            return;
+        }
+        if (!stack || !symbolicatedStack) {
+            (0, NotificationCenter_1.showNotification)('Could not determine where this composition is defined', 2000);
+            return;
+        }
+        const notification = (0, NotificationCenter_1.showNotification)('Renaming...', null);
+        renameComposition({
+            newCompositionId: newId,
+            signal: new AbortController().signal,
+            symbolicatedStack,
+        })
+            .then((result) => {
+            if (!result.success) {
+                notification.replaceContent(`Could not rename composition: ${result.reason}`, 2000);
+                return;
+            }
+            notification.replaceContent(`Renamed to ${newId}`, 2000);
+        })
+            .catch((err) => {
+            notification.replaceContent(`Could not rename composition: ${err.message}`, 2000);
+        });
+    }, [
+        compositionId,
+        getValidationMessage,
+        renameComposition,
+        stack,
+        symbolicatedStack,
+    ]);
+    return (jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: compositionId, canRename: canRename, onCommit: commit }));
+};
+exports.InlineCompositionName = InlineCompositionName;

package/dist/components/InlineEditableTitle.d.ts

@@ -0,0 +1,8 @@
+import type * as React from 'react';
+export declare const InlineEditableTitle: React.FC<{
+    readonly value: string;
+    readonly canRename: boolean;
+    readonly getInitialSelection?: (value: string) => [number, number];
+    readonly onCommit: (newValue: string) => void;
+    readonly title?: string;
+}>;

package/dist/components/InlineEditableTitle.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineEditableTitle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const titleWrapper = {
+    boxSizing: 'border-box',
+    color: colors_1.WHITE,
+    fontSize: 12,
+    height: 18,
+    lineHeight: '18px',
+    marginLeft: -4,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    width: 'calc(100% + 4px)',
+};
+const titleInner = {
+    borderRadius: 4,
+    boxSizing: 'border-box',
+    display: 'inline-grid',
+    fontSize: 12,
+    lineHeight: '18px',
+    maxWidth: '100%',
+    paddingLeft: 4,
+    paddingRight: 4,
+    verticalAlign: 'top',
+};
+const titleGridItem = {
+    fontSize: 12,
+    gridArea: '1 / 1',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const titleInput = {
+    appearance: 'none',
+    backgroundColor: colors_1.TRANSPARENT,
+    border: 'none',
+    boxShadow: 'none',
+    color: colors_1.WHITE,
+    fontFamily: 'inherit',
+    fontSize: 12,
+    height: 18,
+    lineHeight: '18px',
+    margin: 0,
+    minWidth: 0,
+    outline: 'none',
+    overflow: 'hidden',
+    padding: 0,
+    WebkitAppearance: 'none',
+    width: '100%',
+};
+const InlineEditableTitle = ({ value, canRename, getInitialSelection, onCommit, title }) => {
+    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [draftValue, setDraftValue] = (0, react_1.useState)(value);
+    const inputRef = (0, react_1.useRef)(null);
+    const cancelledRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!isEditing) {
+            setDraftValue(value);
+        }
+    }, [isEditing, value]);
+    const focusInput = (0, react_1.useCallback)((input) => {
+        inputRef.current = input;
+        if (!input) {
+            return;
+        }
+        input.focus();
+        if (getInitialSelection) {
+            const [start, end] = getInitialSelection(value);
+            input.setSelectionRange(start, end);
+            return;
+        }
+        input.select();
+    }, [getInitialSelection, value]);
+    const commit = (0, react_1.useCallback)((newValue) => {
+        if (cancelledRef.current) {
+            return;
+        }
+        setIsEditing(false);
+        onCommit(newValue);
+    }, [onCommit]);
+    const startEditing = (0, react_1.useCallback)(() => {
+        if (!canRename) {
+            return;
+        }
+        cancelledRef.current = false;
+        setDraftValue(value);
+        setIsEditing(true);
+    }, [canRename, value]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        setDraftValue(e.target.value);
+    }, []);
+    const onBlur = (0, react_1.useCallback)((e) => {
+        commit(e.currentTarget.value);
+    }, [commit]);
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        var _a;
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            cancelledRef.current = true;
+            setDraftValue(value);
+            setIsEditing(false);
+        }
+    }, [value]);
+    const backgroundColor = isEditing
+        ? colors_1.INPUT_BACKGROUND
+        : isHovered && canRename
+            ? colors_1.WHITE_ALPHA_06
+            : colors_1.TRANSPARENT;
+    const innerStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...titleInner,
+            backgroundColor,
+            cursor: isEditing ? 'text' : canRename ? 'pointer' : 'default',
+            userSelect: isEditing ? 'text' : 'none',
+            width: isEditing ? '100%' : undefined,
+        };
+    }, [backgroundColor, canRename, isEditing]);
+    return (jsx_runtime_1.jsx("div", { style: titleWrapper, title: title !== null && title !== void 0 ? title : value, children: jsx_runtime_1.jsxs("span", { style: innerStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: isEditing || !canRename ? undefined : startEditing, children: [
+                jsx_runtime_1.jsx("span", { "aria-hidden": isEditing, style: {
+                        ...titleGridItem,
+                        visibility: isEditing ? 'hidden' : 'visible',
+                    }, children: value }), isEditing ? (jsx_runtime_1.jsx("input", { ref: focusInput, style: { ...titleGridItem, ...titleInput }, value: draftValue, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown })) : null] }) }));
+};
+exports.InlineEditableTitle = InlineEditableTitle;

package/dist/components/InspectorInfoHeader.js

@@ -7,7 +7,7 @@ const InspectorPanelLayout_1 = require("./InspectorPanelLayout");
 exports.INSPECTOR_INFO_HEADER_MIN_HEIGHT = 84;
 const container = {
     backgroundColor: colors_1.BACKGROUND,
-    color: 'white',
+    color: colors_1.WHITE,
     display: 'block',
     minHeight: exports.INSPECTOR_INFO_HEADER_MIN_HEIGHT,
     padding: `6px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
@@ -25,7 +25,7 @@ const content = {
 };
 const title = {
     backgroundColor: colors_1.BACKGROUND,
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 12,
     lineHeight: '18px',
     overflow: 'hidden',

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

@@ -4,5 +4,6 @@ import type { UpdaterFunction } from '../RenderModal/SchemaEditor/ZodSwitch';
 export declare const DefaultInspector: React.FC<{
     readonly composition: _InternalTypes['AnyComposition'] | null;
     readonly currentDefaultProps: Record<string, unknown>;
+    readonly readOnlyStudio: boolean;
     readonly setDefaultProps: UpdaterFunction<Record<string, unknown>>;
 }>;

package/dist/components/InspectorPanel/DefaultInspector.js

@@ -18,7 +18,7 @@ const SegmentedControl_1 = require("../SegmentedControl");
 const VisualControlsContent_1 = require("../VisualControls/VisualControlsContent");
 const common_1 = require("./common");
 const styles_1 = require("./styles");
-const DefaultInspector = ({ composition, currentDefaultProps, setDefaultProps }) => {
+const DefaultInspector = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a, _b;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const hasSelectedAsset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset';
@@ -70,7 +70,7 @@ const DefaultInspector = ({ composition, currentDefaultProps, setDefaultProps })
         showCannotSaveDefaultPropsWarning: canShowDefaultPropsSection,
     });
     if (hasSelectedAsset) {
-        return (jsx_runtime_1.jsx("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: styles_1.compositionSection, children: jsx_runtime_1.jsx(CurrentAsset_1.CurrentAsset, {}) }) }));
+        return (jsx_runtime_1.jsx("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: styles_1.compositionSection, children: jsx_runtime_1.jsx(CurrentAsset_1.CurrentAsset, { readOnlyStudio: readOnlyStudio }) }) }));
     }
     if (composition === null) {
         return jsx_runtime_1.jsx("div", { style: styles_1.container });

package/dist/components/InspectorPanel/KeyframeEasingNavigator.js

@@ -64,7 +64,7 @@ const chevronIcon = {
     height: 12,
     width: 8,
 };
-const disabledChevronColor = 'rgba(255, 255, 255, 0.25)';
+const disabledChevronColor = colors_1.WHITE_ALPHA_25;
 const NavigationChevron = ({ color, direction }) => {
     const path = direction === 'left' ? 'M6 1L2 6L6 11' : 'M2 1L6 6L2 11';
     return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 12", style: chevronIcon, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) }));

package/dist/components/InspectorPanel/KeyframeInspector.js

@@ -85,6 +85,7 @@ const KeyframeInspector = ({ selection }) => {
                 getDragOverrides,
                 propStatuses,
                 nodePath,
+                includeTextContent: false,
             });
             const sequenceField = (_b = sequenceFields === null || sequenceFields === void 0 ? void 0 : sequenceFields.find((candidate) => candidate.key === keyframeField.fieldKey)) !== null && _b !== void 0 ? _b : null;
             const sequencePropStatus = (_c = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[keyframeField.fieldKey]) !== null && _c !== void 0 ? _c : null;

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequenceInspectorHeaderWithDivider = exports.SequenceInspectorHeader = exports.useSequenceInspectorSourceLocation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const InlineEditableTitle_1 = require("../InlineEditableTitle");
 const InspectorSourceLocation_1 = require("../InspectorSourceLocation");
 const use_open_sequence_in_editor_1 = require("../Timeline/use-open-sequence-in-editor");
+const use_rename_sequence_1 = require("../Timeline/use-rename-sequence");
 const styles_1 = require("./styles");
 const useSequenceInspectorSourceLocation = (sequence) => {
     const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
@@ -35,36 +37,18 @@ const useSequenceInspectorSourceLocation = (sequence) => {
     };
 };
 exports.useSequenceInspectorSourceLocation = useSequenceInspectorSourceLocation;
-const useSequenceDisplayName = (track) => {
-    var _a, _b;
-    var _c;
-    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const nodePath = (_c = (_a = track.nodePathInfo) === null || _a === void 0 ? void 0 : _a.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
-    return (0, react_1.useMemo)(() => {
-        var _a;
-        const propStatusesForOverride = nodePath
-            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
-            : undefined;
-        const codeNameStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.name;
-        const fallbackDisplayName = ((_a = track.sequence.controls) === null || _a === void 0 ? void 0 : _a.componentName) || '<Sequence>';
-        if ((codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status) === 'static' &&
-            typeof codeNameStatus.codeValue === 'string') {
-            return codeNameStatus.codeValue;
-        }
-        if ((codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status) === 'static') {
-            return fallbackDisplayName;
-        }
-        return track.sequence.displayName || fallbackDisplayName;
-    }, [
-        nodePath,
-        propStatuses,
-        (_b = track.sequence.controls) === null || _b === void 0 ? void 0 : _b.componentName,
-        track.sequence.displayName,
-    ]);
-};
 const SequenceInspectorHeader = ({ sourceLocation, track }) => {
     var _a;
-    const sequenceDisplayName = useSequenceDisplayName(track);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { canRename, displayName, fallbackDisplayName, saveName } = (0, use_rename_sequence_1.useRenameSequence)({
+        clientId: previewServerState.type === 'connected'
+            ? previewServerState.clientId
+            : null,
+        nodePathInfo: track.nodePathInfo,
+        sequence: track.sequence,
+        validatedLocation: sourceLocation.validatedLocation,
+    });
+    const sequenceDisplayName = displayName || fallbackDisplayName;
     const { documentationLink } = track.sequence;
     const openDocumentationLink = (0, react_1.useCallback)(() => {
         if (!documentationLink) {
@@ -79,8 +63,11 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
         };
     }, [documentationLink]);
     const componentName = (_a = track.sequence.controls) === null || _a === void 0 ? void 0 : _a.componentName;
+    const onRename = (0, react_1.useCallback)((newName) => {
+        saveName(newName).catch(() => undefined);
+    }, [saveName]);
     return (jsx_runtime_1.jsxs("div", { style: styles_1.sequenceHeader, children: [
-            jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderTitle, children: sequenceDisplayName }), documentationLink ? (jsx_runtime_1.jsx("button", { type: "button", style: subtitleStyle, title: "Open component docs", onClick: openDocumentationLink, children: componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation })
+            jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderTitle, children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename }) }), documentationLink ? (jsx_runtime_1.jsx("button", { type: "button", style: subtitleStyle, title: "Open component docs", onClick: openDocumentationLink, children: componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation })
         ] }));
 };
 exports.SequenceInspectorHeader = SequenceInspectorHeader;

package/dist/components/InspectorPanel/common.js

@@ -37,7 +37,7 @@ exports.InspectorDetailRow = InspectorDetailRow;
 const inlineLabelButton = {
     alignItems: 'center',
     appearance: 'none',
-    backgroundColor: 'transparent',
+    backgroundColor: colors_1.TRANSPARENT,
     border: 'none',
     color: colors_1.LIGHT_TEXT,
     cursor: 'default',
@@ -69,7 +69,7 @@ const inlineLabelIcon = {
 };
 const InspectorInlineAction = ({ children, disabled, onClick, renderIcon }) => {
     const [hovered, setHovered] = react_1.default.useState(false);
-    const color = hovered && !disabled ? 'white' : colors_1.LIGHT_TEXT;
+    const color = hovered && !disabled ? colors_1.WHITE : colors_1.LIGHT_TEXT;
     const buttonStyle = react_1.default.useMemo(() => ({
         ...(disabled ? inlineLabelButtonDisabled : inlineLabelButton),
         color,

package/dist/components/InspectorPanel/styles.js

@@ -5,7 +5,7 @@ const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 exports.container = {
     backgroundColor: colors_1.BACKGROUND,
-    color: 'white',
+    color: colors_1.WHITE,
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
@@ -52,11 +52,11 @@ exports.sequenceHeader = {
     padding: `6px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 4px`,
 };
 exports.sequenceHeaderTitle = {
-    alignSelf: 'flex-start',
+    alignSelf: 'stretch',
     backgroundColor: colors_1.BACKGROUND,
     border: 'none',
-    color: 'white',
-    display: 'inline-flex',
+    color: colors_1.WHITE,
+    display: 'flex',
     fontFamily: 'sans-serif',
     fontSize: 12,
     lineHeight: '18px',
@@ -170,7 +170,7 @@ exports.detailLabel = {
     fontSize: 13,
 };
 exports.detailValue = {
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 13,
     fontVariantNumeric: 'tabular-nums',
     minWidth: 0,

package/dist/components/InspectorPanel.d.ts

@@ -4,5 +4,6 @@ import type { UpdaterFunction } from './RenderModal/SchemaEditor/ZodSwitch';
 export declare const InspectorPanel: React.FC<{
     readonly composition: _InternalTypes['AnyComposition'] | null;
     readonly currentDefaultProps: Record<string, unknown>;
+    readonly readOnlyStudio: boolean;
     readonly setDefaultProps: UpdaterFunction<Record<string, unknown>>;
 }>;

package/dist/components/InspectorPanel.js

@@ -9,11 +9,11 @@ const inspector_selection_1 = require("./InspectorPanel/inspector-selection");
 const SelectedInspector_1 = require("./InspectorPanel/SelectedInspector");
 const styles_1 = require("./InspectorPanel/styles");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
-const InspectorPanel = ({ composition, currentDefaultProps, setDefaultProps }) => {
+const InspectorPanel = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const sameSequenceInspectorSelection = (0, react_1.useMemo)(() => (0, inspector_selection_1.getSameSequenceInspectorSelection)(selectedItems), [selectedItems]);
     if (selectedItems.length === 0) {
-        return (jsx_runtime_1.jsx(DefaultInspector_1.DefaultInspector, { composition: composition, currentDefaultProps: currentDefaultProps, setDefaultProps: setDefaultProps }));
+        return (jsx_runtime_1.jsx(DefaultInspector_1.DefaultInspector, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps }));
     }
     if (selectedItems.length > 1) {
         if (sameSequenceInspectorSelection) {

package/dist/components/InspectorSequenceSection.js

@@ -47,7 +47,7 @@ const TimelineExpandedRow_1 = require("./Timeline/TimelineExpandedRow");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const use_timeline_expanded_tree_1 = require("./Timeline/use-timeline-expanded-tree");
 const container = {
-    color: 'white',
+    color: colors_1.WHITE,
     display: 'flex',
     flexDirection: 'column',
     fontFamily: 'Arial, Helvetica, sans-serif',
@@ -79,9 +79,40 @@ const isEffectsRoot = (node) => {
     const { auxiliaryKeys } = node.nodePathInfo;
     return auxiliaryKeys[auxiliaryKeys.length - 1] === 'effects';
 };
+const INSPECTOR_COLLAPSED_ROWS_SESSION_STORAGE_KEY = 'remotion.editor.inspectorCollapsedRows';
 const getInspectorExpansionKey = (nodePathInfo) => {
     return JSON.stringify(nodePathInfo);
 };
+const loadInspectorCollapsedKeys = () => {
+    if (typeof window === 'undefined') {
+        return new Set();
+    }
+    try {
+        const raw = window.sessionStorage.getItem(INSPECTOR_COLLAPSED_ROWS_SESSION_STORAGE_KEY);
+        if (raw === null) {
+            return new Set();
+        }
+        const parsed = JSON.parse(raw);
+        if (!Array.isArray(parsed)) {
+            return new Set();
+        }
+        return new Set(parsed.filter((key) => typeof key === 'string'));
+    }
+    catch (_a) {
+        return new Set();
+    }
+};
+const persistInspectorCollapsedKeys = (keys) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    try {
+        window.sessionStorage.setItem(INSPECTOR_COLLAPSED_ROWS_SESSION_STORAGE_KEY, JSON.stringify([...keys]));
+    }
+    catch (_a) {
+        // Ignore quota errors or disabled storage.
+    }
+};
 const getInspectorControlGroups = (rows) => {
     return timeline_layout_1.SCHEMA_FIELD_GROUPS.map((group) => ({
         ...group,
@@ -106,8 +137,9 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
     const { tree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
+        includeTextContent: true,
     });
-    const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(() => new Set());
+    const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(loadInspectorCollapsedKeys);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const getIsExpanded = (0, react_1.useCallback)((candidate) => {
@@ -123,6 +155,7 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
             else {
                 next.add(key);
             }
+            persistInspectorCollapsedKeys(next);
             return next;
         });
     }, []);

package/dist/components/InstallablePackage.js

@@ -13,7 +13,7 @@ const InstallablePackageComp = ({ isInstalled, pkg, link, description }) => {
         }, children: [
             jsx_runtime_1.jsx("a", { href: link, style: {
                     fontSize: FONT_SIZE,
-                    color: colors_1.TEXT_COLOR,
+                    color: colors_1.WHITE_HEX,
                     textDecoration: 'none',
                 }, target: "_blank", children: pkg }), ' ', isInstalled ? (jsx_runtime_1.jsx("span", { style: { opacity: 0.3, fontSize: 'inherit' }, children: "(installed)" })) : null, jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: FONT_SIZE }, children: description })
         ] }));

package/dist/components/KeyboardShortcutsExplainer.js

@@ -15,16 +15,16 @@ const left = {
 const key = {
     background: colors_1.INPUT_BACKGROUND,
     padding: '3px 6px',
-    color: 'white',
+    color: colors_1.WHITE,
     borderRadius: 3,
-    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    border: '1px solid ' + colors_1.BLACK_ALPHA_60,
     borderBottomWidth: 3,
     fontSize: 14,
     fontFamily: 'monospace',
 };
 const right = {
     fontSize: 14,
-    color: '#eee',
+    color: colors_1.KEYBOARD_SHORTCUT_KEY_COLOR,
 };
 const container = {
     paddingLeft: 20,
@@ -34,7 +34,7 @@ const container = {
 };
 const title = {
     fontWeight: 'bold',
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 14,
     marginBottom: 10,
 };
@@ -42,7 +42,7 @@ const keyboardShortcutsDisabled = {
     padding: 12,
     width: '100%',
     fontSize: 14,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    backgroundColor: colors_1.WHITE_ALPHA_10,
 };
 const ul = {
     marginTop: 0,

package/dist/components/LoopToggle.js

@@ -14,6 +14,6 @@ const LoopToggle = ({ loop, setLoop }) => {
             return !c;
         });
     }, [setLoop]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : 'white', d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : colors_1.WHITE, d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
 };
 exports.LoopToggle = LoopToggle;

package/dist/components/Menu/MenuDivider.js

@@ -7,7 +7,7 @@ const menuDivider = {
     marginTop: 4,
     marginBottom: 4,
     height: 1,
-    backgroundColor: colors_1.INPUT_BORDER_COLOR_HOVERED,
+    backgroundColor: colors_1.WHITE_ALPHA_05,
 };
 const MenuDivider = () => {
     return jsx_runtime_1.jsx("div", { style: menuDivider });