@remotion/studio 4.0.477 → 4.0.479

package/dist/components/EditorRuler/index.js

@@ -73,12 +73,13 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
                 if (!shouldDeleteGuideRef.current) {
                     shouldDeleteGuideRef.current = true;
                 }
-                (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
                 setGuidesList((prevState) => {
                     const newGuides = prevState.map((guide) => {
                         if (guide.id !== draggingGuideId) {
                             return guide;
                         }
+                        const desiredCursor = guide.orientation === 'vertical' ? 'ew-resize' : 'ns-resize';
+                        (0, ForceSpecificCursor_1.forceSpecificCursor)(desiredCursor);
                         return {
                             ...guide,
                             show: false,
@@ -124,9 +125,10 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         canvasPosition.top,
     ]);
     const onMouseUp = (0, react_1.useCallback)(() => {
+        const shouldDeleteGuide = shouldDeleteGuideRef.current;
         setGuidesList((prevState) => {
             const newGuides = prevState.filter((selected) => {
-                if (!shouldDeleteGuideRef.current) {
+                if (!shouldDeleteGuide) {
                     return true;
                 }
                 return selected.id !== draggingGuideId;
@@ -135,7 +137,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
             return newGuides;
         });
         const deletedGuideWasSelected = selectedItems.some((item) => item.type === 'guide' && item.guideId === draggingGuideId);
-        if (shouldDeleteGuideRef.current && deletedGuideWasSelected) {
+        if (shouldDeleteGuide && deletedGuideWasSelected) {
             clearSelection();
         }
         shouldDeleteGuideRef.current = false;
@@ -143,6 +145,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         shouldCreateGuideRef.current = false;
         setDraggingGuideId(() => null);
         document.removeEventListener('pointerup', onMouseUp);
+        document.removeEventListener('pointercancel', onMouseUp);
         document.removeEventListener('pointermove', onMouseMove);
     }, [
         clearSelection,
@@ -154,14 +157,16 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         onMouseMove,
         selectedItems,
     ]);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         if (draggingGuideId !== null) {
             document.addEventListener('pointermove', onMouseMove);
             document.addEventListener('pointerup', onMouseUp);
+            document.addEventListener('pointercancel', onMouseUp);
         }
         return () => {
             document.removeEventListener('pointermove', onMouseMove);
             document.removeEventListener('pointerup', onMouseUp);
+            document.removeEventListener('pointercancel', onMouseUp);
             if (requestAnimationFrameRef.current) {
                 cancelAnimationFrame(requestAnimationFrameRef.current);
             }

package/dist/components/EffectPickerModal.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type AddEffectModalState } from '../state/modals';
+export declare const EffectPickerModal: React.FC<{
+    readonly state: AddEffectModalState;
+}>;

package/dist/components/EffectPickerModal.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EffectPickerModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const modals_1 = require("../state/modals");
+const ContextMenu_1 = require("./ContextMenu");
+const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
+const effect_picker_search_1 = require("./effect-picker-search");
+const layout_1 = require("./layout");
+const is_menu_item_1 = require("./Menu/is-menu-item");
+const DismissableModal_1 = require("./NewComposition/DismissableModal");
+const RemInput_1 = require("./NewComposition/RemInput");
+const shared_1 = require("./QuickSwitcher/shared");
+const container = {
+    width: 500,
+};
+const content = {
+    padding: '12px 16px 10px',
+};
+const inputStyle = {
+    width: '100%',
+};
+const resultList = {
+    height: 320,
+    overflowY: 'auto',
+    paddingBottom: 10,
+};
+const noResults = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
+    padding: '12px 16px',
+};
+const resultContainer = {
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: '7px 16px',
+};
+const labelContainer = {
+    flex: 1,
+    minWidth: 0,
+};
+const label = {
+    fontSize: shared_1.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const category = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 11,
+    flexShrink: 0,
+};
+const EffectPickerResult = ({ item, selected, onSelected }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    (0, shared_1.useScrollIntoViewOnSelected)(ref, selected);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...resultContainer,
+            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({ hovered, selected }),
+        };
+    }, [hovered, selected]);
+    const labelStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...label,
+            color: selected || hovered ? 'white' : colors_1.LIGHT_TEXT,
+        };
+    }, [hovered, selected]);
+    const onClick = (0, react_1.useCallback)(() => {
+        onSelected(item);
+    }, [item, onSelected]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
+        const documentationLink = (0, studio_shared_1.getEffectDocumentationLink)(item);
+        return [
+            {
+                type: 'item',
+                id: `open-${item.id}-docs`,
+                keyHint: null,
+                label: 'Open effect docs',
+                leftItem: null,
+                disabled: false,
+                onClick: () => {
+                    window.open(documentationLink, '_blank', 'noopener,noreferrer');
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: `open-${item.id}-docs`,
+            },
+        ];
+    }, [item]);
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: null, children: jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [
+                jsx_runtime_1.jsx("div", { style: labelContainer, children: jsx_runtime_1.jsx("div", { style: labelStyle, children: item.label }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: category, children: item.category })
+            ] }) }));
+};
+const EffectPickerContent = ({ state }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const [query, setQuery] = (0, react_1.useState)('');
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
+    const inputRef = (0, react_1.useRef)(null);
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const results = (0, react_1.useMemo)(() => {
+        return (0, effect_picker_search_1.filterEffectCatalog)({ items: studio_shared_1.EFFECT_CATALOG, query });
+    }, [query]);
+    const selectedIndexRounded = results.length === 0 ? -1 : (0, shared_1.loopIndex)(selectedIndex, results.length);
+    const selectItem = (0, react_1.useCallback)((item) => {
+        setSelectedModal(null);
+        (0, effect_drag_and_drop_1.addEffectToSequence)({
+            clientId: state.clientId,
+            effect: item.effect,
+            fileName: state.fileName,
+            nodePath: state.nodePath,
+        });
+    }, [setSelectedModal, state.clientId, state.fileName, state.nodePath]);
+    const onArrowDown = (0, react_1.useCallback)(() => {
+        setSelectedIndex((i) => i + 1);
+    }, []);
+    const onArrowUp = (0, react_1.useCallback)(() => {
+        setSelectedIndex((i) => i - 1);
+    }, []);
+    const onEnter = (0, react_1.useCallback)(() => {
+        if (selectedIndexRounded === -1) {
+            return;
+        }
+        selectItem(results[selectedIndexRounded]);
+    }, [results, selectItem, selectedIndexRounded]);
+    (0, react_1.useEffect)(() => {
+        const downBinding = keybindings.registerKeybinding({
+            key: 'ArrowDown',
+            callback: onArrowDown,
+            commandCtrlKey: false,
+            event: 'keydown',
+            preventDefault: true,
+            triggerIfInputFieldFocused: true,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const upBinding = keybindings.registerKeybinding({
+            key: 'ArrowUp',
+            callback: onArrowUp,
+            commandCtrlKey: false,
+            event: 'keydown',
+            preventDefault: true,
+            triggerIfInputFieldFocused: true,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const enterBinding = keybindings.registerKeybinding({
+            key: 'Enter',
+            callback: onEnter,
+            commandCtrlKey: false,
+            event: 'keydown',
+            preventDefault: true,
+            triggerIfInputFieldFocused: true,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            downBinding.unregister();
+            upBinding.unregister();
+            enterBinding.unregister();
+        };
+    }, [keybindings, onArrowDown, onArrowUp, onEnter]);
+    const onTextChange = (0, react_1.useCallback)((e) => {
+        setQuery(e.target.value);
+        setSelectedIndex(0);
+    }, []);
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: inputStyle, autoFocus: true, status: "ok", value: query, onChange: onTextChange, placeholder: "Search effects...", rightAlign: false }) }), jsx_runtime_1.jsx("div", { style: resultList, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: results.length === 0 ? (jsx_runtime_1.jsx("div", { style: noResults, children: "No effects found" })) : (results.map((item, i) => {
+                    return (jsx_runtime_1.jsx(EffectPickerResult, { item: item, selected: selectedIndexRounded === i, onSelected: selectItem }, item.id));
+                })) })
+        ] }));
+};
+const EffectPickerModal = ({ state }) => {
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(EffectPickerContent, { state: state }) }));
+};
+exports.EffectPickerModal = EffectPickerModal;

package/dist/components/InlineAction.js

@@ -22,6 +22,7 @@ const InlineAction = ({ renderAction, onClick, disabled, title, }) => {
                 : (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
             height: 24,
             width: 24,
+            padding: 0,
             display: 'inline-flex',
             justifyContent: 'center',
             alignItems: 'center',

package/dist/components/InspectorInfoHeader.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const INSPECTOR_INFO_HEADER_MIN_HEIGHT = 84;
+export declare const InspectorInfoHeader: React.FC<{
+    readonly children?: React.ReactNode;
+}>;
+export declare const InspectorInfoTitle: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const InspectorInfoSubtitle: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/components/InspectorInfoHeader.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorInfoSubtitle = exports.InspectorInfoTitle = exports.InspectorInfoHeader = exports.INSPECTOR_INFO_HEADER_MIN_HEIGHT = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const InspectorPanelLayout_1 = require("./InspectorPanelLayout");
+exports.INSPECTOR_INFO_HEADER_MIN_HEIGHT = 84;
+const container = {
+    backgroundColor: colors_1.BACKGROUND,
+    color: 'white',
+    display: 'block',
+    minHeight: exports.INSPECTOR_INFO_HEADER_MIN_HEIGHT,
+    padding: `6px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+};
+const row = {
+    backgroundColor: colors_1.BACKGROUND,
+    display: 'flex',
+    flexDirection: 'row',
+    lineHeight: '18px',
+    minWidth: 0,
+};
+const content = {
+    minWidth: 0,
+    width: '100%',
+};
+const title = {
+    backgroundColor: colors_1.BACKGROUND,
+    color: 'white',
+    fontSize: 12,
+    lineHeight: '18px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const subtitle = {
+    backgroundColor: colors_1.BACKGROUND,
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 12,
+    lineHeight: '18px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const InspectorInfoHeader = ({ children }) => {
+    return (jsx_runtime_1.jsx("div", { style: container, children: children === undefined || children === null ? null : (jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsx("div", { style: content, children: children }) })) }));
+};
+exports.InspectorInfoHeader = InspectorInfoHeader;
+const InspectorInfoTitle = ({ children }) => {
+    return jsx_runtime_1.jsx("div", { style: title, children: children });
+};
+exports.InspectorInfoTitle = InspectorInfoTitle;
+const InspectorInfoSubtitle = ({ children }) => {
+    return jsx_runtime_1.jsx("div", { style: subtitle, children: children });
+};
+exports.InspectorInfoSubtitle = InspectorInfoSubtitle;

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

@@ -0,0 +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;
+    readonly currentDefaultProps: Record<string, unknown>;
+    readonly setDefaultProps: UpdaterFunction<Record<string, unknown>>;
+}>;

package/dist/components/InspectorPanel/DefaultInspector.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultInspector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const VisualControls_1 = require("../../visual-controls/VisualControls");
+const CurrentAsset_1 = require("../CurrentAsset");
+const CurrentComposition_1 = require("../CurrentComposition");
+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 styles_1 = require("./styles");
+const DefaultInspector = ({ composition, currentDefaultProps, 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';
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    const canSaveDefaultProps = (0, react_1.useContext)(ObserveDefaultPropsContext_1.ObserveDefaultPropsContext);
+    const { handles: visualControlHandles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    const [defaultPropsMode, setDefaultPropsMode] = (0, react_1.useState)('schema');
+    const compositionId = (_a = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _a !== void 0 ? _a : null;
+    const hasVisualControls = Object.keys(visualControlHandles).length > 0;
+    (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 === null || composition === void 0 ? void 0 : 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 === null || composition === void 0 ? void 0 : composition.defaultProps, composition === null || composition === void 0 ? void 0 : composition.schema, z]);
+    const { setShowWarning, showWarning } = (0, DataEditor_1.useDataEditorWarningVisibility)();
+    const { warnings: defaultPropsWarnings } = (0, DataEditor_1.useDataEditorWarnings)({
+        canSaveDefaultProps: (_b = canSaveDefaultProps === null || canSaveDefaultProps === void 0 ? void 0 : canSaveDefaultProps.canSaveDefaultProps) !== null && _b !== void 0 ? _b : null,
+        defaultProps: currentDefaultProps,
+        mode: defaultPropsMode,
+        propsEditType: 'default-props',
+        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, {}) }) }));
+    }
+    if (composition === null) {
+        return jsx_runtime_1.jsx("div", { style: styles_1.container });
+    }
+    return (jsx_runtime_1.jsxs("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(CurrentComposition_1.CurrentComposition, {}) }), canShowDefaultPropsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }), jsx_runtime_1.jsxs("div", { style: styles_1.defaultPropsSection, 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)
+                        ] })
+                ] })) : null, hasVisualControls ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }), jsx_runtime_1.jsxs("div", { style: styles_1.visualControlsSection, children: [
+                            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Visual Controls" }), jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})
+                        ] })
+                ] })) : null] }));
+};
+exports.DefaultInspector = DefaultInspector;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type EasingSelection } from '../Timeline/update-selected-easing';
+export declare const EasingInspector: React.FC<{
+    readonly selection: EasingSelection;
+}>;

package/dist/components/InspectorPanel/EasingInspector.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EasingInspector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const SegmentedControl_1 = require("../SegmentedControl");
+const EasingEditorModal_1 = require("../Timeline/EasingEditorModal");
+const TimelineSelection_1 = require("../Timeline/TimelineSelection");
+const update_selected_easing_1 = require("../Timeline/update-selected-easing");
+const common_1 = require("./common");
+const styles_1 = require("./styles");
+const EasingInspector = ({ selection }) => {
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const initialEasing = (0, react_1.useMemo)(() => (0, update_selected_easing_1.getTimelineEasingValueForSelection)({
+        selection,
+        sequences,
+        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+        propStatuses,
+    }), [overrideIdToNodePathMappings, propStatuses, selection, sequences]);
+    const state = (0, react_1.useMemo)(() => {
+        if (initialEasing === null) {
+            return null;
+        }
+        return {
+            initialEasing,
+            selections: [selection],
+        };
+    }, [initialEasing, selection]);
+    const renderHeader = (0, react_1.useCallback)((modeItems) => (jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx("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: "Easing" }), jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false, size: "compact" })
+                ] }) }) })), []);
+    if (state === null) {
+        return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Easing unavailable" });
+    }
+    return (jsx_runtime_1.jsx("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditor, { state: state, renderHeader: renderHeader }, (0, TimelineSelection_1.getTimelineSelectionKey)(selection)) }));
+};
+exports.EasingInspector = EasingInspector;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TimelineSelection } from '../Timeline/TimelineSelection';
+export declare const GuideInspector: React.FC<{
+    readonly selection: Extract<TimelineSelection, {
+        type: 'guide';
+    }>;
+}>;

package/dist/components/InspectorPanel/GuideInspector.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GuideInspector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_guides_1 = require("../../state/editor-guides");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const common_1 = require("./common");
+const styles_1 = require("./styles");
+const updateGuidePosition = ({ guideId, persist, position, setGuidesList, }) => {
+    setGuidesList((prevState) => {
+        const newGuides = prevState.map((guide) => {
+            if (guide.id !== guideId) {
+                return guide;
+            }
+            return {
+                ...guide,
+                position: Math.round(position),
+                show: true,
+            };
+        });
+        if (persist) {
+            (0, editor_guides_1.persistGuidesList)(newGuides);
+        }
+        return newGuides;
+    });
+};
+const GuideInspector = ({ selection }) => {
+    const { guidesList, setGuidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const guide = guidesList.find((candidate) => candidate.id === selection.guideId);
+    const onValueChange = (0, react_1.useCallback)((value) => {
+        updateGuidePosition({
+            guideId: selection.guideId,
+            persist: false,
+            position: value,
+            setGuidesList,
+        });
+    }, [selection.guideId, setGuidesList]);
+    const onValueChangeEnd = (0, react_1.useCallback)((value) => {
+        updateGuidePosition({
+            guideId: selection.guideId,
+            persist: true,
+            position: value,
+            setGuidesList,
+        });
+    }, [selection.guideId, setGuidesList]);
+    if (!guide) {
+        return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Guide unavailable" });
+    }
+    return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
+            jsx_runtime_1.jsxs(common_1.InspectorSectionHeader, { children: [guide.orientation === 'vertical' ? 'Vertical' : 'Horizontal', " guide"] }), jsx_runtime_1.jsx("div", { style: styles_1.guideDetailsContainer, children: jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: guide.orientation === 'vertical' ? 'X position' : 'Y position', children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: guide.position, status: "ok", onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: () => undefined, step: 1, formatter: (value) => String(Math.round(Number(value))), rightAlign: true, small: true }) }) })
+        ] }));
+};
+exports.GuideInspector = GuideInspector;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TimelineSelection } from '../Timeline/TimelineSelection';
+export declare const KeyframeInspector: React.FC<{
+    readonly selection: Extract<TimelineSelection, {
+        type: 'keyframe';
+    }>;
+}>;