@remotion/studio 4.0.478 → 4.0.481

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';
+    }>;
+}>;

package/dist/components/InspectorPanel/KeyframeInspector.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyframeInspector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const parse_keyframe_field_from_node_path_1 = require("../Timeline/parse-keyframe-field-from-node-path");
+const TimelineEffectPropItem_1 = require("../Timeline/TimelineEffectPropItem");
+const TimelineSequencePropItem_1 = require("../Timeline/TimelineSequencePropItem");
+const common_1 = require("./common");
+const styles_1 = require("./styles");
+const use_track_for_selection_1 = require("./use-track-for-selection");
+const KeyframeInspector = ({ selection }) => {
+    const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const details = (0, react_1.useMemo)(() => {
+        var _a;
+        var _b, _c, _d, _e, _f, _g;
+        if (!track || !track.sequence.controls) {
+            return null;
+        }
+        const keyframeField = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(selection.nodePathInfo.auxiliaryKeys);
+        if (keyframeField === null) {
+            return null;
+        }
+        const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
+        const { keyframeDisplayOffset } = track;
+        const sourceFrame = selection.frame - keyframeDisplayOffset;
+        if (keyframeField.type === 'sequence') {
+            const sequenceFields = (0, timeline_layout_1.getFieldsToShow)({
+                schema: track.sequence.controls.schema,
+                currentRuntimeValueDotNotation: track.sequence.controls.currentRuntimeValueDotNotation,
+                getDragOverrides,
+                propStatuses,
+                nodePath,
+            });
+            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;
+            if (!sequenceField || (sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed') {
+                return null;
+            }
+            return {
+                type: 'sequence',
+                field: sequenceField,
+                fieldLabel: (_d = sequenceField.description) !== null && _d !== void 0 ? _d : sequenceField.key,
+                fileName: nodePath.absolutePath,
+                nodePath,
+                propStatus: sequencePropStatus,
+                schema: track.sequence.controls.schema,
+                sourceFrame,
+            };
+        }
+        const effect = track.sequence.effects[keyframeField.effectIndex];
+        if (!effect) {
+            return null;
+        }
+        const effectFields = (0, timeline_layout_1.getEffectFieldsToShow)({
+            effect,
+            effectIndex: keyframeField.effectIndex,
+            nodePath,
+            propStatuses,
+            getEffectDragOverrides,
+        });
+        const effectField = (_e = effectFields.find((candidate) => candidate.key === keyframeField.fieldKey)) !== null && _e !== void 0 ? _e : null;
+        const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+            propStatuses,
+            nodePath,
+            effectIndex: keyframeField.effectIndex,
+        });
+        const effectPropStatus = effectStatus.type === 'can-update-effect'
+            ? ((_f = effectStatus.props[keyframeField.fieldKey]) !== null && _f !== void 0 ? _f : null)
+            : null;
+        if (!effectField || (effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed') {
+            return null;
+        }
+        return {
+            type: 'effect',
+            field: effectField,
+            fieldLabel: (_g = effectField.description) !== null && _g !== void 0 ? _g : effectField.key,
+            nodePath,
+            sourceFrame,
+            validatedLocation: {
+                source: nodePath.absolutePath,
+                line: 1,
+                column: 0,
+            },
+        };
+    }, [
+        getDragOverrides,
+        getEffectDragOverrides,
+        propStatuses,
+        selection,
+        track,
+    ]);
+    if (details === null) {
+        return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Keyframe unavailable" });
+    }
+    return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
+            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Keyframe" }), jsx_runtime_1.jsxs("div", { style: styles_1.detailsContainer, children: [
+                    jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Frame", children: selection.frame }), jsx_runtime_1.jsxs("div", { style: styles_1.keyframeEditorRow, children: [
+                            jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorLabel, children: details.fieldLabel }), jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorValue, children: details.type === 'sequence' ? (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequenceKeyframedValue, { field: details.field, fileName: details.fileName, nodePath: details.nodePath, schema: details.schema, propStatus: details.propStatus, sourceFrame: details.sourceFrame })) : (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropValue, { field: details.field, nodePath: details.nodePath, validatedLocation: details.validatedLocation, sourceFrame: details.sourceFrame })) })
+                        ] })
+                ] })
+        ] }));
+};
+exports.KeyframeInspector = KeyframeInspector;

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

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

package/dist/components/InspectorPanel/SelectedInspector.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedInspector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const common_1 = require("./common");
+const EasingInspector_1 = require("./EasingInspector");
+const GuideInspector_1 = require("./GuideInspector");
+const inspector_selection_1 = require("./inspector-selection");
+const KeyframeInspector_1 = require("./KeyframeInspector");
+const SequenceSelectionInspector_1 = require("./SequenceSelectionInspector");
+const SelectedInspector = ({ selection }) => {
+    if ((0, inspector_selection_1.isSequenceSectionSelection)(selection)) {
+        return jsx_runtime_1.jsx(SequenceSelectionInspector_1.SequenceSelectionInspector, { selection: selection });
+    }
+    if (selection.type === 'keyframe') {
+        return jsx_runtime_1.jsx(KeyframeInspector_1.KeyframeInspector, { selection: selection });
+    }
+    if (selection.type === 'easing') {
+        return jsx_runtime_1.jsx(EasingInspector_1.EasingInspector, { selection: selection });
+    }
+    if (selection.type === 'guide') {
+        return jsx_runtime_1.jsx(GuideInspector_1.GuideInspector, { selection: selection });
+    }
+    return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Inspector unavailable" });
+};
+exports.SelectedInspector = SelectedInspector;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { SequenceSectionSelection } from './inspector-selection';
+export declare const SequenceSelectionInspector: React.FC<{
+    readonly selection: SequenceSectionSelection;
+}>;

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -0,0 +1,117 @@
+"use strict";
+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 InspectorSequenceSection_1 = require("../InspectorSequenceSection");
+const InspectorSourceLocation_1 = require("../InspectorSourceLocation");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const TimelineSelection_1 = require("../Timeline/TimelineSelection");
+const use_open_sequence_in_editor_1 = require("../Timeline/use-open-sequence-in-editor");
+const common_1 = require("./common");
+const styles_1 = require("./styles");
+const use_track_for_selection_1 = require("./use-track-for-selection");
+const useSequenceDisplayName = (track) => {
+    var _a;
+    var _b;
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const nodePath = (_b = (_a = track.nodePathInfo) === null || _a === void 0 ? void 0 : _a.sequenceSubscriptionKey) !== null && _b !== void 0 ? _b : null;
+    return (0, react_1.useMemo)(() => {
+        const propStatusesForOverride = nodePath
+            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
+            : undefined;
+        const codeNameStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.name;
+        const displayName = codeNameStatus &&
+            codeNameStatus.status === 'static' &&
+            typeof codeNameStatus.codeValue === 'string'
+            ? codeNameStatus.codeValue
+            : track.sequence.displayName;
+        return displayName || '<Sequence>';
+    }, [nodePath, propStatuses, track.sequence.displayName]);
+};
+const SequenceExpandedInspector = ({ track }) => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(track.sequence);
+    const sequenceDisplayName = useSequenceDisplayName(track);
+    const { documentationLink } = track.sequence;
+    const validatedLocation = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!originalLocation ||
+            !originalLocation.source ||
+            !originalLocation.line) {
+            return null;
+        }
+        return {
+            source: originalLocation.source,
+            line: originalLocation.line,
+            column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
+        };
+    }, [originalLocation]);
+    const openFileLocation = (0, react_1.useCallback)(() => {
+        if (!canOpenInEditor) {
+            return;
+        }
+        openInEditor();
+    }, [canOpenInEditor, openInEditor]);
+    const openDocumentationLink = (0, react_1.useCallback)(() => {
+        if (!documentationLink) {
+            return;
+        }
+        window.open(documentationLink, '_blank', 'noopener,noreferrer');
+    }, [documentationLink]);
+    const subtitleStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...styles_1.sequenceHeaderSubtitle,
+            cursor: documentationLink ? 'pointer' : 'default',
+        };
+    }, [documentationLink]);
+    const sequenceSelection = (0, react_1.useMemo)(() => {
+        if (!track.nodePathInfo) {
+            return null;
+        }
+        return {
+            type: 'sequence',
+            nodePathInfo: track.nodePathInfo,
+        };
+    }, [track.nodePathInfo]);
+    const sequenceSelected = (0, react_1.useMemo)(() => {
+        if (sequenceSelection === null || selectedItems.length !== 1) {
+            return false;
+        }
+        return ((0, TimelineSelection_1.getTimelineSelectionKey)(selectedItems[0]) ===
+            (0, TimelineSelection_1.getTimelineSelectionKey)(sequenceSelection));
+    }, [selectedItems, sequenceSelection]);
+    const selectSequenceOnInspectorPointerDown = (0, react_1.useCallback)((event) => {
+        if (event.button !== 0 || sequenceSelection === null) {
+            return;
+        }
+        event.stopPropagation();
+        if (sequenceSelected) {
+            return;
+        }
+        selectItems([sequenceSelection]);
+    }, [selectItems, sequenceSelected, sequenceSelection]);
+    if (previewServerState.type !== 'connected') {
+        return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Studio server disconnected" });
+    }
+    if (!track.nodePathInfo ||
+        !(0, InspectorSequenceSection_1.hasSequenceControls)(track.sequence) ||
+        !validatedLocation) {
+        return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
+    }
+    return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
+            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: track.sequence.controls.componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: track.sequence.controls.componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: canOpenInEditor, onOpen: openFileLocation })
+                ] }), 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 })) })] }));
+};
+const SequenceSelectionInspector = ({ selection }) => {
+    const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);
+    if (!track) {
+        return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
+    }
+    return jsx_runtime_1.jsx(SequenceExpandedInspector, { track: track });
+};
+exports.SequenceSelectionInspector = SequenceSelectionInspector;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { RenderModalWarning } from '../RenderModal/DataEditor';
+export declare const InspectorSectionHeader: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const InspectorMessage: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const InspectorDetailRow: React.FC<{
+    readonly label: string;
+    readonly children: React.ReactNode;
+}>;
+export declare const InspectorDefaultPropsWarnings: React.FC<{
+    readonly warnings: RenderModalWarning[];
+}>;

package/dist/components/InspectorPanel/common.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorDefaultPropsWarnings = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorSectionHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 InspectorMessage = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.centeredMessage, children: children });
+exports.InspectorMessage = InspectorMessage;
+const InspectorDetailRow = ({ label, children }) => (jsx_runtime_1.jsxs("div", { style: styles_1.detailRow, children: [
+        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 InspectorDefaultPropsWarnings = ({ warnings }) => {
+    return (jsx_runtime_1.jsx("div", { style: styles_1.defaultPropsWarningMessages, children: warnings.map((warning) => (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: warning.message, align: "flex-start", type: "warning", size: "compact", action: warning.resolveLink ? (jsx_runtime_1.jsx("a", { href: warning.resolveLink, target: "_blank", rel: "noopener noreferrer", style: styles_1.resolveLinkStyle, children: "Resolve" })) : null }, warning.id))) }));
+};
+exports.InspectorDefaultPropsWarnings = InspectorDefaultPropsWarnings;

package/dist/components/InspectorPanel/inspector-selection.d.ts

@@ -0,0 +1,10 @@
+import { type TimelineSelection } from '../Timeline/TimelineSelection';
+export type SequenceSectionSelection = Extract<TimelineSelection, {
+    type: 'sequence' | 'sequence-prop' | 'sequence-all-effects' | 'sequence-effect' | 'sequence-effect-prop';
+}>;
+export declare const isSequenceSectionSelection: (selection: TimelineSelection) => selection is SequenceSectionSelection;
+type SameSequenceInspectorSelection = Extract<TimelineSelection, {
+    type: 'sequence-prop' | 'sequence-effect' | 'sequence-effect-prop';
+}>;
+export declare const getSameSequenceInspectorSelection: (selections: readonly TimelineSelection[]) => SameSequenceInspectorSelection | null;
+export {};

package/dist/components/InspectorPanel/inspector-selection.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSameSequenceInspectorSelection = exports.isSequenceSectionSelection = void 0;
+const TimelineSelection_1 = require("../Timeline/TimelineSelection");
+const isSequenceSectionSelection = (selection) => {
+    return (selection.type === 'sequence' ||
+        selection.type === 'sequence-prop' ||
+        selection.type === 'sequence-all-effects' ||
+        selection.type === 'sequence-effect' ||
+        selection.type === 'sequence-effect-prop');
+};
+exports.isSequenceSectionSelection = isSequenceSectionSelection;
+const isSameSequenceInspectorSelection = (selection) => {
+    return (selection.type === 'sequence-prop' ||
+        selection.type === 'sequence-effect' ||
+        selection.type === 'sequence-effect-prop');
+};
+const getSameSequenceInspectorSelection = (selections) => {
+    const firstSelection = selections[0];
+    if (!firstSelection || !isSameSequenceInspectorSelection(firstSelection)) {
+        return null;
+    }
+    const rootSequenceKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(firstSelection.nodePathInfo);
+    for (const selection of selections) {
+        if (!isSameSequenceInspectorSelection(selection)) {
+            return null;
+        }
+        if ((0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selection.nodePathInfo) !==
+            rootSequenceKey) {
+            return null;
+        }
+    }
+    return firstSelection;
+};
+exports.getSameSequenceInspectorSelection = getSameSequenceInspectorSelection;

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

@@ -0,0 +1,28 @@
+import type React from 'react';
+export declare const container: React.CSSProperties;
+export declare const scrollableContainer: React.CSSProperties;
+export declare const defaultPropsSection: React.CSSProperties;
+export declare const visualControlsSection: React.CSSProperties;
+export declare const compositionSection: React.CSSProperties;
+export declare const inspectorSectionDivider: React.CSSProperties;
+export declare const sectionHeader: React.CSSProperties;
+export declare const sequenceHeader: React.CSSProperties;
+export declare const sequenceHeaderTitle: React.CSSProperties;
+export declare const sequenceHeaderSubtitle: React.CSSProperties;
+export declare const sectionHeaderRow: React.CSSProperties;
+export declare const sectionHeaderTitle: React.CSSProperties;
+export declare const sectionHeaderStart: React.CSSProperties;
+export declare const sectionHeaderEnd: React.CSSProperties;
+export declare const defaultPropsWarningContainer: React.CSSProperties;
+export declare const defaultPropsWarningMessages: React.CSSProperties;
+export declare const resolveLinkStyle: React.CSSProperties;
+export declare const selectedContainer: React.CSSProperties;
+export declare const centeredMessage: React.CSSProperties;
+export declare const detailsContainer: React.CSSProperties;
+export declare const guideDetailsContainer: React.CSSProperties;
+export declare const detailRow: React.CSSProperties;
+export declare const detailLabel: React.CSSProperties;
+export declare const detailValue: React.CSSProperties;
+export declare const keyframeEditorRow: React.CSSProperties;
+export declare const keyframeEditorLabel: React.CSSProperties;
+export declare const keyframeEditorValue: React.CSSProperties;