@remotion/studio 4.0.478 → 4.0.481

package/dist/components/EditorContent.js

@@ -4,6 +4,7 @@ exports.EditorContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const MenuToolbar_1 = require("./MenuToolbar");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
@@ -38,7 +39,7 @@ const EditorContent = ({ readOnlyStudio, children }) => {
             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));
     return (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [
-                jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(TimelineKeyframeDragState_1.TimelineKeyframeDragStateProvider, { children: content })
+                jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(TimelineKeyframeDragState_1.TimelineKeyframeDragStateProvider, { children: content })
             ] }) }));
 };
 exports.EditorContent = EditorContent;

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/ExpandedTracksProvider.d.ts

@@ -6,6 +6,7 @@ type ExpandedTracksGetterContextValue = {
     readonly getIsExpanded: GetIsExpanded;
 };
 type ExpandedTracksSetterContextValue = {
+    readonly expandParentTracks: (nodePathInfo: SequenceNodePathInfo) => void;
     readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
     readonly migrateExpandedTracksForSubscriptionKey: (oldKey: SequencePropsSubscriptionKey, newKey: SequencePropsSubscriptionKey) => void;
 };

package/dist/components/ExpandedTracksProvider.js

@@ -4,11 +4,46 @@ exports.ExpandedTracksProvider = exports.ExpandedTracksSetterContext = exports.E
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const migrate_expanded_tracks_for_subscription_key_1 = require("../helpers/migrate-expanded-tracks-for-subscription-key");
-const persist_boolean_map_1 = require("../helpers/persist-boolean-map");
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const SESSION_STORAGE_KEY = 'remotion.editor.expandedTracks';
+const onlyCollapsedTrackValues = (state) => {
+    const result = {};
+    for (const [key, value] of Object.entries(state)) {
+        if (value === false) {
+            result[key] = false;
+        }
+    }
+    return result;
+};
 const loadExpandedTracks = () => {
-    return (0, persist_boolean_map_1.loadPersistedBooleanMap)(SESSION_STORAGE_KEY);
+    if (typeof window === 'undefined') {
+        return {};
+    }
+    try {
+        const raw = window.sessionStorage.getItem(SESSION_STORAGE_KEY);
+        if (raw === null) {
+            return {};
+        }
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== 'object') {
+            return {};
+        }
+        return onlyCollapsedTrackValues(parsed);
+    }
+    catch (_a) {
+        return {};
+    }
+};
+const persistExpandedTracks = (state) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    try {
+        window.sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(onlyCollapsedTrackValues(state)));
+    }
+    catch (_a) {
+        // Ignore quota errors or disabled storage.
+    }
 };
 exports.ExpandedTracksGetterContext = (0, react_1.createContext)({
     getIsExpanded: () => {
@@ -16,6 +51,9 @@ exports.ExpandedTracksGetterContext = (0, react_1.createContext)({
     },
 });
 exports.ExpandedTracksSetterContext = (0, react_1.createContext)({
+    expandParentTracks: () => {
+        throw new Error('ExpandedTracksSetterContext not initialized');
+    },
     toggleTrack: () => {
         throw new Error('ExpandedTracksSetterContext not initialized');
     },
@@ -25,11 +63,46 @@ exports.ExpandedTracksSetterContext = (0, react_1.createContext)({
 });
 const ExpandedTracksProvider = ({ children }) => {
     const [expandedTracks, setExpandedTracks] = (0, react_1.useState)(loadExpandedTracks);
+    const expandParentTracks = (0, react_1.useCallback)((nodePathInfo) => {
+        const keysToExpand = [];
+        for (let i = 0; i < nodePathInfo.auxiliaryKeys.length; i++) {
+            keysToExpand.push((0, timeline_node_path_key_1.timelineNodePathInfoToKey)({
+                ...nodePathInfo,
+                auxiliaryKeys: nodePathInfo.auxiliaryKeys.slice(0, i),
+            }));
+        }
+        if (keysToExpand.length === 0) {
+            return;
+        }
+        setExpandedTracks((prev) => {
+            let changed = false;
+            const next = { ...prev };
+            for (const key of keysToExpand) {
+                if (next[key] === false) {
+                    delete next[key];
+                    changed = true;
+                }
+            }
+            if (!changed) {
+                return prev;
+            }
+            persistExpandedTracks(next);
+            return next;
+        });
+    }, []);
     const toggleTrack = (0, react_1.useCallback)((nodePathInfo) => {
         setExpandedTracks((prev) => {
+            var _a;
             const key = (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo);
-            const next = (0, persist_boolean_map_1.toggleBooleanMapKey)(prev, key);
-            (0, persist_boolean_map_1.persistBooleanMap)(SESSION_STORAGE_KEY, next);
+            const next = { ...prev };
+            const isExpanded = (_a = next[key]) !== null && _a !== void 0 ? _a : true;
+            if (isExpanded) {
+                next[key] = false;
+            }
+            else {
+                delete next[key];
+            }
+            persistExpandedTracks(next);
             return next;
         });
     }, []);
@@ -39,20 +112,21 @@ const ExpandedTracksProvider = ({ children }) => {
             if (!next) {
                 return prev;
             }
-            (0, persist_boolean_map_1.persistBooleanMap)(SESSION_STORAGE_KEY, next);
+            persistExpandedTracks(next);
             return next;
         });
     }, []);
     const getterValue = (0, react_1.useMemo)(() => ({
         getIsExpanded: (nodePathInfo) => {
             var _a;
-            return (_a = expandedTracks[(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
+            return (_a = expandedTracks[(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)]) !== null && _a !== void 0 ? _a : true;
         },
     }), [expandedTracks]);
     const setterValue = (0, react_1.useMemo)(() => ({
+        expandParentTracks,
         toggleTrack,
         migrateExpandedTracksForSubscriptionKey: migrateExpandedTracks,
-    }), [toggleTrack, migrateExpandedTracks]);
+    }), [expandParentTracks, toggleTrack, migrateExpandedTracks]);
     return (jsx_runtime_1.jsx(exports.ExpandedTracksSetterContext.Provider, { value: setterValue, children: jsx_runtime_1.jsx(exports.ExpandedTracksGetterContext.Provider, { value: getterValue, children: children }) }));
 };
 exports.ExpandedTracksProvider = ExpandedTracksProvider;

package/dist/components/GlobalKeybindings.d.ts

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

package/dist/components/GlobalKeybindings.js

@@ -2,18 +2,110 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GlobalKeybindings = void 0;
 const react_1 = require("react");
+const remotion_1 = require("remotion");
+const calculate_timeline_1 = require("../helpers/calculate-timeline");
+const client_id_1 = require("../helpers/client-id");
+const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
+const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const checkerboard_1 = require("../state/checkerboard");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
 const CompositionSelector_1 = require("./CompositionSelector");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const GlobalKeybindings = () => {
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
+const sequencePropShortcuts = {
+    p: 'style.translate',
+    r: 'style.rotate',
+    s: 'style.scale',
+    t: 'style.opacity',
+};
+const hasOwnProperty = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
+const GlobalKeybindings = ({ readOnlyStudio }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
     const { navigateToNextComposition, navigateToPreviousComposition } = (0, CompositionSelector_1.useCompositionNavigation)();
+    const video = remotion_1.Internals.useVideo();
+    const timeline = (0, react_1.useMemo)(() => {
+        if (videoConfig === null) {
+            return [];
+        }
+        return (0, calculate_timeline_1.calculateTimeline)({
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+        });
+    }, [overrideIdToNodePathMappings, sequences, videoConfig]);
+    const selectSequenceProp = (0, react_1.useCallback)((fieldKey) => {
+        const { selectedItems, selectItems } = currentSelection.current;
+        if (selectedItems.length !== 1) {
+            return false;
+        }
+        const [selection] = selectedItems;
+        if (selection.type !== 'sequence' && selection.type !== 'sequence-prop') {
+            return false;
+        }
+        const selectedTrackKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selection.nodePathInfo);
+        const track = timeline.find((candidate) => candidate.nodePathInfo !== null &&
+            (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(candidate.nodePathInfo) ===
+                selectedTrackKey);
+        if (!(track === null || track === void 0 ? void 0 : track.sequence.controls)) {
+            return false;
+        }
+        const { schema, currentRuntimeValueDotNotation } = track.sequence.controls;
+        if (!hasOwnProperty(schema, fieldKey) &&
+            !hasOwnProperty(currentRuntimeValueDotNotation, fieldKey)) {
+            return false;
+        }
+        selectItems([
+            {
+                type: 'sequence-prop',
+                nodePathInfo: {
+                    ...selection.nodePathInfo,
+                    auxiliaryKeys: ['controls', fieldKey],
+                },
+                key: fieldKey,
+            },
+        ]);
+        return true;
+    }, [currentSelection, timeline]);
+    const openRenderModal = (0, react_1.useCallback)(() => {
+        if (!video) {
+            return;
+        }
+        if (type !== 'connected' && !show_browser_rendering_1.SHOW_BROWSER_RENDERING && !readOnlyStudio) {
+            (0, NotificationCenter_1.showNotification)('Studio server is offline', 2000);
+            return;
+        }
+        const renderButton = document.getElementById('render-modal-button');
+        renderButton.click();
+    }, [readOnlyStudio, type, video]);
     (0, react_1.useEffect)(() => {
+        const onSequencePropKey = (event) => {
+            const key = event.key.toLowerCase();
+            const fieldKey = sequencePropShortcuts[key];
+            if (!fieldKey) {
+                return;
+            }
+            if (selectSequenceProp(fieldKey)) {
+                event.preventDefault();
+                return;
+            }
+            if (key === 't') {
+                setCheckerboard((c) => !c);
+                event.preventDefault();
+                return;
+            }
+            if (key === 'r') {
+                openRenderModal();
+                event.preventDefault();
+            }
+        };
         const nKey = keybindings.registerKeybinding({
             event: 'keypress',
             key: 'n',
@@ -65,17 +157,15 @@ const GlobalKeybindings = () => {
                 preventDefault: true,
             })
             : null;
-        const cKey = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: 't',
-            callback: () => {
-                setCheckerboard((c) => !c);
-            },
+        const sequencePropKeys = Object.keys(sequencePropShortcuts).map((key) => keybindings.registerKeybinding({
+            event: 'keydown',
+            key,
+            callback: onSequencePropKey,
             commandCtrlKey: false,
-            preventDefault: true,
+            preventDefault: false,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
-        });
+        }));
         const questionMark = keybindings.registerKeybinding({
             event: 'keypress',
             key: '?',
@@ -111,7 +201,9 @@ const GlobalKeybindings = () => {
         });
         return () => {
             nKey.unregister();
-            cKey.unregister();
+            for (const sequencePropKey of sequencePropKeys) {
+                sequencePropKey.unregister();
+            }
             questionMark.unregister();
             cmdKKey.unregister();
             cmdSKey.unregister();
@@ -121,6 +213,8 @@ const GlobalKeybindings = () => {
         };
     }, [
         keybindings,
+        openRenderModal,
+        selectSequenceProp,
         setCheckerboard,
         setSelectedModal,
         navigateToNextComposition,

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