@remotion/studio 4.0.493 → 4.0.495

package/dist/components/CurrentAsset.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurrentAsset = exports.AssetInfo = exports.getCurrentAssetMediaDetailLines = exports.getCurrentAssetMetadataSource = exports.CURRENT_ASSET_HEIGHT = void 0;
+exports.CurrentAsset = exports.AssetInfo = exports.getCurrentAssetMediaDetailLines = exports.getCurrentAssetImageMetadataSource = exports.getCurrentAssetMetadataSource = exports.CURRENT_ASSET_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -9,6 +9,7 @@ const client_id_1 = require("../helpers/client-id");
 const format_media_duration_1 = require("../helpers/format-media-duration");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const render_codec_label_1 = require("../helpers/render-codec-label");
+const use_image_metadata_1 = require("../helpers/use-image-metadata");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const InlineEditableTitle_1 = require("./InlineEditableTitle");
 const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
@@ -25,6 +26,15 @@ const getCurrentAssetMetadataSource = (assetName) => {
         : null;
 };
 exports.getCurrentAssetMetadataSource = getCurrentAssetMetadataSource;
+const getCurrentAssetImageMetadataSource = (assetName) => {
+    if (!assetName) {
+        return null;
+    }
+    return (0, get_preview_file_type_1.getPreviewFileType)(assetName) === 'image'
+        ? (0, remotion_1.staticFile)(assetName)
+        : null;
+};
+exports.getCurrentAssetImageMetadataSource = getCurrentAssetImageMetadataSource;
 const formatFps = (fps) => `${fps.toFixed(2)} FPS`;
 const getCurrentAssetMediaDetailLines = (mediaMetadata) => {
     const detailLines = [];
@@ -74,6 +84,8 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     }, [assetName, staticFiles]);
     const src = (0, exports.getCurrentAssetMetadataSource)(assetName);
     const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)(src);
+    const imageSrc = (0, exports.getCurrentAssetImageMetadataSource)(assetName);
+    const imageMetadata = (0, use_image_metadata_1.useImageMetadata)(imageSrc);
     const canRename = onAssetClick === undefined &&
         connectionStatus === 'connected' &&
         !readOnlyStudio;
@@ -96,6 +108,10 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
             subtitleParts.push(`${mediaMetadata.width}x${mediaMetadata.height}`);
         }
     }
+    else if (imageMetadata) {
+        subtitleParts.push(imageMetadata.format);
+        subtitleParts.push(`${imageMetadata.width}x${imageMetadata.height}`);
+    }
     const mediaDetailLines = mediaMetadata
         ? (0, exports.getCurrentAssetMediaDetailLines)(mediaMetadata)
         : [];

package/dist/components/Editor.js

@@ -40,6 +40,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const noop_1 = require("../helpers/noop");
+const studio_fit_padding_1 = require("../helpers/studio-fit-padding");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const canvas_ref_1 = require("../state/canvas-ref");
 const scale_lock_1 = require("../state/scale-lock");
@@ -83,10 +84,7 @@ const Editor = ({ Root, readOnlyStudio }) => {
         if (!size) {
             return null;
         }
-        return {
-            type: 'canvas-size',
-            canvasSize: size,
-        };
+        return (0, studio_fit_padding_1.getStudioCurrentScaleContext)(size);
     }, [size]);
     const MemoRoot = (0, react_1.useMemo)(() => {
         return react_1.default.memo(Root);

package/dist/components/InitialCompositionLoader.d.ts

@@ -1,3 +1,3 @@
 import type React from 'react';
-export declare const useSelectComposition: () => (c: import("remotion").AnyComposition, push: boolean) => void;
+export declare const useSelectComposition: () => (c: import("remotion").AnyComposition, push: boolean, frame?: number | null) => void;
 export declare const InitialCompositionLoader: React.FC;

package/dist/components/InitialCompositionLoader.js

@@ -16,14 +16,18 @@ const use_static_files_1 = require("./use-static-files");
 const useSelectComposition = () => {
     const { setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const setFrame = remotion_1.Internals.useTimelineSetFrame();
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
-    return (0, react_1.useCallback)((c, push) => {
+    return (0, react_1.useCallback)((c, push, frame = null) => {
         var _a;
         if (push) {
             (0, url_state_1.pushUrl)(`/${c.id}`);
         }
         (_a = ExplorerPanelRef_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectCompositionPanel();
+        if (frame !== null) {
+            setFrame((current) => ({ ...current, [c.id]: frame }));
+        }
         setCanvasContent({ type: 'composition', compositionId: c.id });
         const { folderName, parentFolderName } = c;
         if (folderName !== null) {
@@ -46,6 +50,7 @@ const useSelectComposition = () => {
         isMobileLayout,
         setCanvasContent,
         setCompositionFoldersExpanded,
+        setFrame,
         setSidebarCollapsedState,
     ]);
 };

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const AssetInspector: React.FC<{
+    readonly readOnlyStudio: boolean;
+}>;

package/dist/components/InspectorPanel/AssetInspector.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetInspector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CurrentAsset_1 = require("../CurrentAsset");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const styles_1 = require("./styles");
+const AssetInspector = ({ readOnlyStudio }) => {
+    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.inspectorOverviewSection, children: jsx_runtime_1.jsx(CurrentAsset_1.CurrentAsset, { readOnlyStudio: readOnlyStudio }) }) }));
+};
+exports.AssetInspector = AssetInspector;

package/dist/components/InspectorPanel/{DefaultInspector.d.ts → CompositionInspector.d.ts}

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

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionInspector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const frame_1 = require("../../icons/frame");
+const solid_1 = require("../../icons/solid");
+const VisualControls_1 = require("../../visual-controls/VisualControls");
+const DefaultPropsEditor_1 = require("../DefaultPropsEditor");
+const get_zod_if_possible_1 = require("../get-zod-if-possible");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const ObserveDefaultPropsContext_1 = require("../ObserveDefaultPropsContext");
+const DataEditor_1 = require("../RenderModal/DataEditor");
+const zod_schema_type_1 = require("../RenderModal/SchemaEditor/zod-schema-type");
+const WarningIndicatorButton_1 = require("../RenderModal/WarningIndicatorButton");
+const SegmentedControl_1 = require("../SegmentedControl");
+const VisualControlsContent_1 = require("../VisualControls/VisualControlsContent");
+const common_1 = require("./common");
+const CompositionInspectorHeader_1 = require("./CompositionInspectorHeader");
+const CompositionMetadata_1 = require("./CompositionMetadata");
+const styles_1 = require("./styles");
+const use_composition_actions_1 = require("./use-composition-actions");
+const actionIconStyle = {
+    height: 18,
+    width: 18,
+};
+const CompositionActions = () => {
+    const { canInsertAsset, canInsertSolid, canShowInsertAsset, canShowInsertSolid, insertAsset, insertSolid, } = (0, use_composition_actions_1.useCompositionActions)();
+    if (!canShowInsertAsset && !canShowInsertSolid) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null] }));
+};
+const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, setDefaultProps }) => {
+    var _a;
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    const canSaveDefaultProps = (0, react_1.useContext)(ObserveDefaultPropsContext_1.ObserveDefaultPropsContext);
+    const [defaultPropsMode, setDefaultPropsMode] = (0, react_1.useState)('schema');
+    const compositionId = composition.id;
+    (0, react_1.useEffect)(() => {
+        setDefaultPropsMode('schema');
+    }, [compositionId]);
+    const defaultPropsModeItems = (0, react_1.useMemo)(() => {
+        return [
+            {
+                key: 'schema',
+                label: 'Schema',
+                onClick: () => {
+                    setDefaultPropsMode('schema');
+                },
+                selected: defaultPropsMode === 'schema',
+            },
+            {
+                key: 'json',
+                label: 'JSON',
+                onClick: () => {
+                    setDefaultPropsMode('json');
+                },
+                selected: defaultPropsMode === 'json',
+            },
+        ];
+    }, [defaultPropsMode]);
+    const canShowDefaultPropsSection = (0, react_1.useMemo)(() => {
+        if (!z || !composition.schema || !composition.defaultProps) {
+            return false;
+        }
+        if (!(typeof composition.schema.safeParse ===
+            'function')) {
+            return false;
+        }
+        return (0, zod_schema_type_1.getZodSchemaType)(composition.schema) !== 'any';
+    }, [composition.defaultProps, composition.schema, z]);
+    const { setShowWarning, showWarning } = (0, DataEditor_1.useDataEditorWarningVisibility)();
+    const { warnings: defaultPropsWarnings } = (0, DataEditor_1.useDataEditorWarnings)({
+        canSaveDefaultProps: (_a = canSaveDefaultProps === null || canSaveDefaultProps === void 0 ? void 0 : canSaveDefaultProps.canSaveDefaultProps) !== null && _a !== void 0 ? _a : null,
+        defaultProps: currentDefaultProps,
+        mode: defaultPropsMode,
+        propsEditType: 'default-props',
+        showCannotSaveDefaultPropsWarning: canShowDefaultPropsSection,
+    });
+    if (!canShowDefaultPropsSection) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsxs("div", { style: styles_1.compositionDefaultPropsSection, children: [
+                    jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
+                                jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderStart, children: [
+                                        jsx_runtime_1.jsx("span", { style: styles_1.sectionHeaderTitle, children: "Default Props" }), jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: defaultPropsModeItems, needsWrapping: false, size: "compact" })
+                                    ] }), jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: defaultPropsWarnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: defaultPropsWarnings.length, size: "compact" })) : null })
+                            ] }) }), defaultPropsWarnings.length > 0 && showWarning ? (jsx_runtime_1.jsx("div", { style: styles_1.defaultPropsWarningContainer, children: jsx_runtime_1.jsx(common_1.InspectorDefaultPropsWarnings, { warnings: defaultPropsWarnings }) })) : null, jsx_runtime_1.jsx(DefaultPropsEditor_1.DefaultPropsEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, propsEditType: "default-props", schemaErrorMode: "compact", layout: "inspector", mode: defaultPropsMode, onModeChange: setDefaultPropsMode, hideModeControls: canShowDefaultPropsSection, warnings: defaultPropsWarnings, showWarning: false, setShowWarning: setShowWarning, hideWarningButton: true }, composition.id)
+                ] })
+        ] }));
+};
+const CompositionVisualControlsSection = () => {
+    const { handles: visualControlHandles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    const hasVisualControls = interactivity_enabled_1.studioInteractivityEnabled && Object.keys(visualControlHandles).length > 0;
+    if (!hasVisualControls) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsxs("div", { style: styles_1.compositionVisualControlsSection, children: [
+                    jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Visual Controls" }), jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})
+                ] })
+        ] }));
+};
+const CompositionInspector = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
+    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(CompositionDefaultPropsSection, { composition: composition, currentDefaultProps: currentDefaultProps, setDefaultProps: setDefaultProps }), jsx_runtime_1.jsx(CompositionVisualControlsSection, {}), jsx_runtime_1.jsx(CompositionActions, {})
+        ] }));
+};
+exports.CompositionInspector = CompositionInspector;

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

@@ -0,0 +1 @@
+export declare const CompositionInspectorHeader: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/{CurrentComposition.js → InspectorPanel/CompositionInspectorHeader.js}

@@ -1,21 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurrentComposition = exports.CURRENT_COMPOSITION_HEIGHT = void 0;
+exports.CompositionInspectorHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const is_composition_still_1 = require("../helpers/is-composition-still");
-const open_in_editor_1 = require("../helpers/open-in-editor");
-const react_2 = require("../icons/react");
-const still_1 = require("../icons/still");
-const video_1 = require("../icons/video");
-const InlineCompositionName_1 = require("./InlineCompositionName");
-const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
-const InspectorLocationCopy_1 = require("./InspectorLocationCopy");
-const InspectorSourceLocation_1 = require("./InspectorSourceLocation");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
-exports.CURRENT_COMPOSITION_HEIGHT = 66;
+const is_composition_still_1 = require("../../helpers/is-composition-still");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
+const react_2 = require("../../icons/react");
+const still_1 = require("../../icons/still");
+const video_1 = require("../../icons/video");
+const InlineCompositionName_1 = require("../InlineCompositionName");
+const InspectorInfoHeader_1 = require("../InspectorInfoHeader");
+const InspectorLocationCopy_1 = require("../InspectorLocationCopy");
+const InspectorSourceLocation_1 = require("../InspectorSourceLocation");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
+const COMPOSITION_INSPECTOR_HEADER_HEIGHT = 66;
 const sourceLocationIconStyle = {
     flexShrink: 0,
     height: 13,
@@ -24,7 +24,7 @@ const sourceLocationIconStyle = {
 const renderReactIcon = (color) => {
     return jsx_runtime_1.jsx(react_2.ReactIcon, { color: color, style: sourceLocationIconStyle });
 };
-const CurrentComposition = () => {
+const CompositionInspectorHeader = () => {
     var _a, _b, _c, _d, _e;
     const video = remotion_1.Internals.useVideo();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -85,9 +85,9 @@ const CurrentComposition = () => {
         }
         return (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: color, style: sourceLocationIconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: sourceLocationIconStyle }));
     }, [video]);
-    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { minHeight: exports.CURRENT_COMPOSITION_HEIGHT, children: video ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { minHeight: COMPOSITION_INSPECTOR_HEADER_HEIGHT, children: video ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                 jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: validatedLocation, name: video.id, children: [
                         jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation, renderIcon: renderCompositionIcon }), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null, onOpen: openComponentLocation, renderIcon: renderReactIcon })
                     ] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: "Still" })) : null] })) : null }));
 };
-exports.CurrentComposition = CurrentComposition;
+exports.CompositionInspectorHeader = CompositionInspectorHeader;

package/dist/components/InspectorPanel/{CompositionDimensions.d.ts → CompositionMetadata.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const CompositionDimensions: React.FC<{
+export declare const CompositionMetadata: React.FC<{
     readonly compositionId: string;
     readonly disabled: boolean;
     readonly stack: string | null;

package/dist/components/InspectorPanel/{CompositionDimensions.js → CompositionMetadata.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionDimensions = void 0;
+exports.CompositionMetadata = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -14,19 +14,28 @@ const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
 const common_1 = require("./common");
 const optimistic_composition_metadata_1 = require("./optimistic-composition-metadata");
 const styles_1 = require("./styles");
+const compositionMetadataContainer = {
+    ...styles_1.detailsContainer,
+    paddingBottom: 4,
+    paddingTop: 4,
+};
 const fieldLabels = {
     durationInFrames: 'Duration',
     fps: 'Frame rate',
     height: 'Height',
     width: 'Width',
 };
-const computedStyle = {
+const computedContainerStyle = {
+    ...InputDragger_1.inputDraggerContainerStyle,
+    textAlign: 'right',
+    userSelect: 'none',
+};
+const computedValueStyle = {
     color: colors_1.WHITE_ALPHA_40,
     fontFamily: 'sans-serif',
     fontSize: 12,
     fontStyle: 'italic',
-    lineHeight: '16px',
-    userSelect: 'none',
+    lineHeight: 1.5,
 };
 const dimensionsControls = {
     alignItems: 'center',
@@ -108,9 +117,9 @@ const CompositionMetadataValue = ({ compositionId, computed, disabled, field, on
         }
         return String(roundedValue);
     }, [field]);
-    return computed ? (jsx_runtime_1.jsx("span", { style: computedStyle, children: formatValue(value) })) : disabled ? (formatValue(value)) : (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": fieldLabels[field], type: "number", value: (_a = dragValue !== null && dragValue !== void 0 ? dragValue : pendingValue === null || pendingValue === void 0 ? void 0 : pendingValue.value) !== null && _a !== void 0 ? _a : value, disabled: pendingValue !== null, status: "ok", onValueChange: setDragValue, onValueChangeEnd: save, onTextChange: () => undefined, min: isFps ? 0.01 : 1, step: isFps ? 0.01 : 1, dragDecimalPlaces: isFps ? 2 : 0, formatter: formatValue, rightAlign: true, small: true }));
+    return computed ? (jsx_runtime_1.jsx("span", { style: computedContainerStyle, children: jsx_runtime_1.jsx("span", { style: computedValueStyle, children: formatValue(value) }) })) : disabled ? (formatValue(value)) : (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": fieldLabels[field], type: "number", value: (_a = dragValue !== null && dragValue !== void 0 ? dragValue : pendingValue === null || pendingValue === void 0 ? void 0 : pendingValue.value) !== null && _a !== void 0 ? _a : value, disabled: pendingValue !== null, status: "ok", onValueChange: setDragValue, onValueChangeEnd: save, onTextChange: () => undefined, min: isFps ? 0.01 : 1, step: isFps ? 0.01 : 1, dragDecimalPlaces: isFps ? 2 : 0, formatter: formatValue, rightAlign: true, small: true }));
 };
-const CompositionDimensions = ({ compositionId, disabled, stack }) => {
+const CompositionMetadata = ({ compositionId, disabled, stack }) => {
     var _a, _b, _c, _d;
     const video = remotion_1.Internals.useVideo();
     const resolvedVideoConfig = remotion_1.Internals.useResolvedVideoConfig(compositionId);
@@ -163,11 +172,11 @@ const CompositionDimensions = ({ compositionId, disabled, stack }) => {
     const fpsIsComputed = (metadataSource === null || metadataSource === void 0 ? void 0 : metadataSource.fps) === 'calculate-metadata';
     const durationIsComputed = (metadataSource === null || metadataSource === void 0 ? void 0 : metadataSource.durationInFrames) === 'calculate-metadata';
     const isStill = (0, is_composition_still_1.isCompositionStill)(video);
-    return (jsx_runtime_1.jsxs("div", { style: styles_1.detailsContainer, children: [
+    return (jsx_runtime_1.jsxs("div", { style: compositionMetadataContainer, children: [
             jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Dimensions", children: jsx_runtime_1.jsxs("div", { style: dimensionsControls, children: [
                         jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: widthIsComputed, disabled: disabled, field: "width", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_a = pendingValues.width) !== null && _a !== void 0 ? _a : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.width }), jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: heightIsComputed, disabled: disabled, field: "height", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_b = pendingValues.height) !== null && _b !== void 0 ? _b : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.height })
                     ] }) }), isStill ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Frame rate", children: jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: fpsIsComputed, disabled: disabled, field: "fps", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_c = pendingValues.fps) !== null && _c !== void 0 ? _c : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.fps }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Duration", children: jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: durationIsComputed, disabled: disabled, field: "durationInFrames", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_d = pendingValues.durationInFrames) !== null && _d !== void 0 ? _d : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.durationInFrames }) })
                 ] }))] }));
 };
-exports.CompositionDimensions = CompositionDimensions;
+exports.CompositionMetadata = CompositionMetadata;

package/dist/components/InspectorPanel/ConnectedCompositionsSection.js

@@ -9,8 +9,8 @@ const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const common_1 = require("./common");
 const compositionIconStyle = {
-    height: 13,
-    width: 13,
+    height: 18,
+    width: 18,
 };
 const compositionListStyle = {
     display: 'flex',

package/dist/components/InspectorPanel/EasingInspector.js

@@ -22,8 +22,8 @@ const styles_1 = require("./styles");
 const use_track_for_selection_1 = require("./use-track-for-selection");
 const addKeyframeIcon = {
     display: 'block',
-    height: 13,
-    width: 12,
+    height: 18,
+    width: 18,
 };
 const EasingInspector = ({ selection }) => {
     var _a, _b;
@@ -214,8 +214,6 @@ const EasingInspector = ({ selection }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Easing unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditor, { state: state, renderHeader: renderHeader }, (0, TimelineSelection_1.getTimelineSelectionKey)(currentEasingSelection)), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(KeyframeSettings_1.KeyframeSettings, { update: easingUpdate }), canAddKeyframeAtPlayhead ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx("div", { style: styles_1.detailsWithInlineAction, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: addKeyframeDisabled, onClick: onAddKeyframeAtPlayhead, renderIcon: (color) => (jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: addKeyframeIcon })), children: `Add keyframe at ${addKeyframeTime}` }) })
-                ] })) : null] }));
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditor, { state: state, renderHeader: renderHeader }, (0, TimelineSelection_1.getTimelineSelectionKey)(currentEasingSelection)), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(KeyframeSettings_1.KeyframeSettings, { update: easingUpdate }), canAddKeyframeAtPlayhead ? (jsx_runtime_1.jsx(common_1.InspectorActionSection, { children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: addKeyframeDisabled, onClick: onAddKeyframeAtPlayhead, renderIcon: (color) => (jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: addKeyframeIcon })), children: `Add keyframe at ${addKeyframeTime}` }) })) : null] }));
 };
 exports.EasingInspector = EasingInspector;

package/dist/components/InspectorPanel/KeyframeInspector.js

@@ -45,8 +45,8 @@ const makeMovedKeyframedDragOverride = ({ details, toFrame, }) => {
 const removeKeyframeIcon = {
     display: 'block',
     flexShrink: 0,
-    height: 13,
-    width: 12,
+    height: 18,
+    width: 18,
 };
 const TrashIcon = ({ color }) => {
     return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", style: removeKeyframeIcon, children: jsx_runtime_1.jsx("path", { fill: color, d: "M136.7 5.9C141.1-7.2 153.3-16 167.1-16l113.9 0c13.8 0 26 8.8 30.4 21.9L320 32 416 32c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64S14.3 32 32 32l96 0 8.7-26.1zM32 144l384 0 0 304c0 35.3-28.7 64-64 64L96 512c-35.3 0-64-28.7-64-64l0-304zm88 64c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24zm104 0c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24zm104 0c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24z" }) }));

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -3,9 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequenceSelectionInspector = 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 scissors_1 = require("../../icons/scissors");
 const InspectorSequenceSection_1 = require("../InspectorSequenceSection");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const split_selected_timeline_item_1 = require("../Timeline/split-selected-timeline-item");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const AlignmentControls_1 = require("./AlignmentControls");
 const common_1 = require("./common");
@@ -13,6 +16,34 @@ const ConnectedCompositionsSection_1 = require("./ConnectedCompositionsSection")
 const SequenceInspectorHeader_1 = require("./SequenceInspectorHeader");
 const styles_1 = require("./styles");
 const use_track_for_selection_1 = require("./use-track-for-selection");
+const splitIconStyle = {
+    height: 18,
+    width: 18,
+};
+const SplitSequenceAction = ({ selection, track }) => {
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const sequencePropStatuses = (0, react_1.useMemo)(() => remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey), [propStatuses, selection]);
+    const eligibility = (0, react_1.useMemo)(() => (0, split_selected_timeline_item_1.getTimelineSequenceSplitEligibility)({
+        selection,
+        sequence: track.sequence,
+        splitFrame: timelinePosition,
+        propStatuses: sequencePropStatuses,
+    }), [selection, sequencePropStatuses, timelinePosition, track.sequence]);
+    const onSplit = (0, react_1.useCallback)(() => {
+        if (!eligibility.canSplit) {
+            return;
+        }
+        (0, split_selected_timeline_item_1.splitTimelineSequenceFromSource)({
+            nodePathInfo: eligibility.nodePathInfo,
+            splitFrame: timelinePosition,
+        }).catch(() => undefined);
+    }, [eligibility, timelinePosition]);
+    if (!eligibility.canSplit) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(common_1.InspectorActionSection, { children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: onSplit, renderIcon: (color) => (jsx_runtime_1.jsx(scissors_1.ScissorsIcon, { style: splitIconStyle, color: color })), children: "Split clip" }) }));
+};
 const SequenceExpandedInspector = ({ track }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
@@ -49,6 +80,7 @@ const SequenceExpandedInspector = ({ track }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Studio server disconnected" });
     }
     if (!track.nodePathInfo ||
+        sequenceSelection === null ||
         !(0, InspectorSequenceSection_1.hasSequenceControls)(track.sequence) ||
         !validatedLocation) {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
@@ -56,7 +88,8 @@ const SequenceExpandedInspector = ({ track }) => {
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
             jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })
-                ] })) : null, jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderSectionHeader: (children) => (jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: children })), renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) })] }));
+                ] })) : null, jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsx(SplitSequenceAction, { selection: sequenceSelection, track: track })
+        ] }));
 };
 const SequenceSelectionInspector = ({ selection }) => {
     const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);

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

@@ -4,6 +4,13 @@ export declare const InspectorSectionHeader: React.FC<{
     readonly children: React.ReactNode;
 }>;
 export declare const InspectorSectionDivider: React.FC;
+export declare const InspectorActionSection: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const InspectorSection: React.FC<{
+    readonly children: React.ReactNode;
+    readonly header: React.ReactNode;
+}>;
 export declare const InspectorBackHeader: React.FC<{
     readonly children: React.ReactNode;
     readonly disabled: boolean;
@@ -22,6 +29,7 @@ export declare const InspectorInlineAction: React.FC<{
     readonly disabled: boolean;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
     readonly renderIcon: (color: string) => React.ReactNode;
+    readonly style?: React.CSSProperties;
 }>;
 export declare const InspectorDefaultPropsWarnings: React.FC<{
     readonly warnings: RenderModalWarning[];

package/dist/components/InspectorPanel/common.js

@@ -3,18 +3,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InspectorDefaultPropsWarnings = exports.InspectorInlineAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackHeader = exports.InspectorSectionDivider = exports.InspectorSectionHeader = void 0;
+exports.InspectorDefaultPropsWarnings = exports.InspectorInlineAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackHeader = exports.InspectorSection = exports.InspectorActionSection = exports.InspectorSectionDivider = exports.InspectorSectionHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const colors_1 = require("../../helpers/colors");
 const InlineAction_1 = require("../InlineAction");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const layout_1 = require("../layout");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const styles_1 = require("./styles");
 const InspectorSectionHeader = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.sectionHeader, children: children });
 exports.InspectorSectionHeader = InspectorSectionHeader;
 const InspectorSectionDivider = () => (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }));
 exports.InspectorSectionDivider = InspectorSectionDivider;
+const InspectorActionSection = ({ children }) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+        jsx_runtime_1.jsx(exports.InspectorSectionDivider, {}), jsx_runtime_1.jsx("div", { style: styles_1.inspectorActionSection, children: children })
+    ] }));
+exports.InspectorActionSection = InspectorActionSection;
+const InspectorSection = ({ children, header }) => {
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(exports.InspectorSectionDivider, {}), jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: header }), children === null ? null : (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionBody, children: children }))] }));
+};
+exports.InspectorSection = InspectorSection;
 const backIcon = {
     alignItems: 'center',
     display: 'flex',
@@ -35,11 +45,13 @@ const InspectorDetailRow = ({ label, children }) => (jsx_runtime_1.jsxs("div", {
         jsx_runtime_1.jsx("div", { style: styles_1.detailLabel, children: label }), jsx_runtime_1.jsx("div", { style: styles_1.detailValue, children: children })
     ] }));
 exports.InspectorDetailRow = InspectorDetailRow;
+const INLINE_LABEL_BUTTON_MARGIN = 4;
 const inlineLabelButton = {
     alignItems: 'center',
     appearance: 'none',
     backgroundColor: colors_1.TRANSPARENT,
     border: 'none',
+    borderRadius: 4,
     boxSizing: 'border-box',
     color: colors_1.LIGHT_TEXT,
     cursor: 'default',
@@ -47,11 +59,12 @@ const inlineLabelButton = {
     fontFamily: 'sans-serif',
     fontSize: 13,
     gap: 8,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     lineHeight: '18px',
-    margin: 0,
-    padding: `5px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    margin: `0 ${INLINE_LABEL_BUTTON_MARGIN}px`,
+    padding: `5px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - INLINE_LABEL_BUTTON_MARGIN}px`,
     textAlign: 'left',
-    width: '100%',
+    width: `calc(100% - ${INLINE_LABEL_BUTTON_MARGIN * 2}px)`,
 };
 const inlineLabelButtonDisabled = {
     ...inlineLabelButton,
@@ -59,25 +72,35 @@ const inlineLabelButtonDisabled = {
 };
 const inlineLabelText = {
     color: colors_1.LIGHT_TEXT,
+    flex: 1,
     fontFamily: 'sans-serif',
     fontSize: 13,
     lineHeight: '18px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
 };
 const inlineLabelIcon = {
     alignItems: 'center',
     display: 'flex',
     flexShrink: 0,
-    height: 13,
+    height: 18,
     justifyContent: 'center',
-    width: 13,
+    width: 18,
 };
-const InspectorInlineAction = ({ children, disabled, onClick, renderIcon }) => {
+const InspectorInlineAction = ({ children, disabled, onClick, renderIcon, style }) => {
     const [hovered, setHovered] = react_1.default.useState(false);
     const color = hovered && !disabled ? colors_1.WHITE : colors_1.LIGHT_TEXT;
     const buttonStyle = react_1.default.useMemo(() => ({
         ...(disabled ? inlineLabelButtonDisabled : inlineLabelButton),
+        backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
+            hovered: hovered && !disabled,
+            selected: false,
+        }),
         color,
-    }), [color, disabled]);
+        ...style,
+    }), [color, disabled, hovered, style]);
     const textStyle = react_1.default.useMemo(() => ({
         ...inlineLabelText,
         color,