@remotion/studio 4.0.477 → 4.0.479

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,116 @@
+"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 titleStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...styles_1.sequenceHeaderTitle,
+            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: [documentationLink ? (jsx_runtime_1.jsx("button", { type: "button", style: titleStyle, title: "Open component docs", onClick: openDocumentationLink, children: sequenceDisplayName })) : (jsx_runtime_1.jsx("div", { style: titleStyle, children: sequenceDisplayName })), 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 SequencePropSelection = Extract<TimelineSelection, {
+    type: 'sequence-prop' | 'sequence-effect-prop';
+}>;
+export declare const getSameSequencePropInspectorSelection: (selections: readonly TimelineSelection[]) => SequencePropSelection | null;
+export {};

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSameSequencePropInspectorSelection = 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 isSequencePropSelection = (selection) => {
+    return (selection.type === 'sequence-prop' ||
+        selection.type === 'sequence-effect-prop');
+};
+const getSameSequencePropInspectorSelection = (selections) => {
+    const firstSelection = selections[0];
+    if (!firstSelection || !isSequencePropSelection(firstSelection)) {
+        return null;
+    }
+    const rootSequenceKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(firstSelection.nodePathInfo);
+    for (const selection of selections) {
+        if (!isSequencePropSelection(selection)) {
+            return null;
+        }
+        if ((0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selection.nodePathInfo) !==
+            rootSequenceKey) {
+            return null;
+        }
+    }
+    return firstSelection;
+};
+exports.getSameSequencePropInspectorSelection = getSameSequencePropInspectorSelection;

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

@@ -0,0 +1,27 @@
+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 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;

package/dist/components/InspectorPanel/styles.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
+const colors_1 = require("../../helpers/colors");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+exports.container = {
+    backgroundColor: colors_1.BACKGROUND,
+    color: 'white',
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    height: '100%',
+    minHeight: 0,
+};
+exports.scrollableContainer = {
+    ...exports.container,
+    overflowY: 'auto',
+};
+exports.defaultPropsSection = {
+    display: 'flex',
+    flexDirection: 'column',
+};
+exports.visualControlsSection = {
+    display: 'flex',
+    flexDirection: 'column',
+};
+exports.compositionSection = {
+    display: 'flex',
+    flexDirection: 'column',
+};
+exports.inspectorSectionDivider = {
+    borderBottom: `1px solid ${colors_1.LINE_COLOR}`,
+};
+exports.sectionHeader = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 12,
+    fontWeight: 'bold',
+    padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+};
+exports.sequenceHeader = {
+    backgroundColor: colors_1.BACKGROUND,
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: 0,
+    padding: `6px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 4px`,
+};
+exports.sequenceHeaderTitle = {
+    alignSelf: 'flex-start',
+    backgroundColor: colors_1.BACKGROUND,
+    border: 'none',
+    color: 'white',
+    display: 'inline-flex',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: '18px',
+    margin: 0,
+    maxWidth: '100%',
+    minWidth: 0,
+    overflow: 'hidden',
+    padding: 0,
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+exports.sectionHeaderRow = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 8,
+    justifyContent: 'space-between',
+    minWidth: 0,
+};
+exports.sectionHeaderTitle = {
+    color: colors_1.LIGHT_TEXT,
+    flexShrink: 0,
+    fontSize: 12,
+    fontWeight: 'bold',
+    lineHeight: '16px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+exports.sectionHeaderStart = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 8,
+    minWidth: 0,
+};
+exports.sectionHeaderEnd = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+};
+exports.defaultPropsWarningContainer = {
+    alignItems: 'flex-start',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 8px`,
+};
+exports.defaultPropsWarningMessages = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+};
+exports.resolveLinkStyle = {
+    color: colors_1.BLUE,
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    textDecoration: 'underline',
+    whiteSpace: 'nowrap',
+};
+exports.selectedContainer = {
+    backgroundColor: colors_1.BACKGROUND,
+    flex: 1,
+    minHeight: 0,
+    overflowY: 'auto',
+};
+exports.centeredMessage = {
+    alignItems: 'center',
+    color: colors_1.LIGHT_TEXT,
+    display: 'flex',
+    flex: 1,
+    fontSize: 14,
+    justifyContent: 'center',
+    padding: 24,
+    textAlign: 'center',
+};
+exports.detailsContainer = {
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+};
+exports.guideDetailsContainer = {
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+};
+exports.detailRow = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 12,
+    justifyContent: 'space-between',
+    padding: '10px 0',
+};
+exports.detailLabel = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
+};
+exports.detailValue = {
+    color: 'white',
+    fontSize: 13,
+    fontVariantNumeric: 'tabular-nums',
+    minWidth: 0,
+    textAlign: 'right',
+    wordBreak: 'break-word',
+};
+exports.keyframeEditorRow = {
+    alignItems: 'flex-start',
+    display: 'flex',
+    gap: 12,
+    justifyContent: 'space-between',
+    minWidth: 0,
+    padding: '10px 0',
+};
+exports.keyframeEditorLabel = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
+    lineHeight: '22px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+exports.keyframeEditorValue = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    justifyContent: 'flex-end',
+    minHeight: 22,
+    minWidth: 0,
+};

package/dist/components/InspectorPanel/use-track-for-selection.d.ts

@@ -0,0 +1,2 @@
+import type { TimelineSelection } from '../Timeline/TimelineSelection';
+export declare const useTrackForSelection: (selection: TimelineSelection) => import("../../helpers/get-timeline-sequence-sort-key").TrackWithHash | null;

package/dist/components/InspectorPanel/use-track-for-selection.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTrackForSelection = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const find_track_for_node_path_info_1 = require("../Timeline/find-track-for-node-path-info");
+const useTrackForSelection = (selection) => {
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    return (0, react_1.useMemo)(() => {
+        var _a;
+        if (selection.type === 'guide') {
+            return null;
+        }
+        return ((_a = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            nodePathInfo: selection.nodePathInfo,
+        })) !== null && _a !== void 0 ? _a : null);
+    }, [overrideIdToNodePathMappings, selection, sequences]);
+};
+exports.useTrackForSelection = useTrackForSelection;

package/dist/components/InspectorPanel.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 InspectorPanel: React.FC<{
+    readonly composition: _InternalTypes['AnyComposition'] | null;
+    readonly currentDefaultProps: Record<string, unknown>;
+    readonly setDefaultProps: UpdaterFunction<Record<string, unknown>>;
+}>;

package/dist/components/InspectorPanel.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const common_1 = require("./InspectorPanel/common");
+const DefaultInspector_1 = require("./InspectorPanel/DefaultInspector");
+const inspector_selection_1 = require("./InspectorPanel/inspector-selection");
+const SelectedInspector_1 = require("./InspectorPanel/SelectedInspector");
+const styles_1 = require("./InspectorPanel/styles");
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
+const InspectorPanel = ({ composition, currentDefaultProps, setDefaultProps }) => {
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const sameSequencePropInspectorSelection = (0, react_1.useMemo)(() => (0, inspector_selection_1.getSameSequencePropInspectorSelection)(selectedItems), [selectedItems]);
+    if (selectedItems.length === 0) {
+        return (jsx_runtime_1.jsx(DefaultInspector_1.DefaultInspector, { composition: composition, currentDefaultProps: currentDefaultProps, setDefaultProps: setDefaultProps }));
+    }
+    if (selectedItems.length > 1) {
+        if (sameSequencePropInspectorSelection) {
+            return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: sameSequencePropInspectorSelection }) }));
+        }
+        return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsxs(common_1.InspectorMessage, { children: [selectedItems.length, " items selected"] }) }));
+    }
+    return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: selectedItems[0] }) }));
+};
+exports.InspectorPanel = InspectorPanel;

package/dist/components/InspectorPanelLayout.d.ts

@@ -0,0 +1 @@
+export declare const INSPECTOR_PANEL_HORIZONTAL_PADDING = 12;

package/dist/components/InspectorPanelLayout.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INSPECTOR_PANEL_HORIZONTAL_PADDING = void 0;
+exports.INSPECTOR_PANEL_HORIZONTAL_PADDING = 12;

package/dist/components/InspectorSequenceSection.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { TSequence } from 'remotion';
+import type { CodePosition } from '../error-overlay/react-overlay/utils/get-source-map';
+import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
+type SequenceWithControls = TSequence & {
+    readonly controls: NonNullable<TSequence['controls']>;
+};
+export declare const hasSequenceControls: (sequence: TSequence) => sequence is SequenceWithControls;
+export declare const InspectorSequenceSection: React.FC<{
+    readonly sequence: SequenceWithControls;
+    readonly validatedLocation: CodePosition;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly keyframeDisplayOffset: number;
+    readonly renderSectionHeader: (children: React.ReactNode) => React.ReactNode;
+}>;
+export {};