@remotion/studio 4.0.515 → 4.0.517

package/dist/components/InspectorPanel/common.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InspectorDefaultPropsWarnings = exports.InspectorQuickAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackAction = exports.InspectorSection = exports.InspectorQuickActionsSection = exports.InspectorSectionDivider = exports.InspectorSectionHeader = void 0;
+exports.InspectorDefaultPropsWarnings = exports.InspectorQuickAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackAction = exports.InspectorSection = exports.InspectorQuickActionsSection = exports.InspectorSectionHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const colors_1 = require("../../helpers/colors");
@@ -14,15 +14,11 @@ const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const styles_1 = require("./styles");
 const InspectorSectionHeader = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.sectionHeader, children: children });
 exports.InspectorSectionHeader = InspectorSectionHeader;
-const InspectorSectionDivider = () => (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }));
-exports.InspectorSectionDivider = InspectorSectionDivider;
-const InspectorQuickActionsSection = ({ children }) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-        jsx_runtime_1.jsx(exports.InspectorSectionDivider, {}), jsx_runtime_1.jsx("div", { style: styles_1.inspectorQuickActionsSection, children: children })
-    ] }));
+const InspectorQuickActionsSection = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.inspectorQuickActionsSection, children: children });
 exports.InspectorQuickActionsSection = InspectorQuickActionsSection;
 const InspectorSection = ({ children, header }) => {
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(exports.InspectorSectionDivider, {}), jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: header }), children === null ? null : (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionBody, children: children }))] }));
+            jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: header }), children === null ? null : (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionBody, children: children }))] }));
 };
 exports.InspectorSection = InspectorSection;
 const backArrowIcon = {
@@ -90,37 +86,8 @@ const inlineLabelIcon = {
     justifyContent: 'center',
     width: 18,
 };
-const segmentedInlineAction = {
-    display: 'flex',
-    gap: 1,
-    margin: `0 ${INLINE_LABEL_BUTTON_MARGIN}px`,
-    width: `calc(100% - ${INLINE_LABEL_BUTTON_MARGIN * 2}px)`,
-};
-const segmentedMainAction = {
-    borderRadius: '4px 0 0 4px',
-    flex: 1,
-    margin: 0,
-    minWidth: 0,
-    width: 'auto',
-};
-const segmentedTrailingAction = {
-    alignItems: 'center',
-    appearance: 'none',
-    border: 'none',
-    borderRadius: '0 4px 4px 0',
-    display: 'flex',
-    flex: '0 0 28px',
-    justifyContent: 'center',
-    margin: 0,
-    padding: 0,
-    width: 28,
-};
-const InspectorQuickAction = ({ children, disabled, iconContainerStyle, onClick, renderIcon, size = 'default', style, title, variant = { type: 'single' }, }) => {
-    const isSegmented = variant.type === 'segmented';
-    // A non-clickable single action (onClick === null) never shows a hover
-    // effect. In the segmented variant, the main segment highlights whenever
-    // the group is hovered, even if it is not clickable itself.
-    const showsHover = !disabled && (onClick !== null || isSegmented);
+const InspectorQuickAction = ({ children, disabled, iconContainerStyle, onClick, renderIcon, size = 'default', style, title, }) => {
+    const showsHover = !disabled && onClick !== null;
     const buttonStyle = react_1.default.useMemo(() => ({
         ...(disabled ? inlineLabelButtonDisabled : inlineLabelButton),
         ...(0, hoverable_1.hoverableStyle)({
@@ -132,31 +99,11 @@ const InspectorQuickAction = ({ children, disabled, iconContainerStyle, onClick,
             hoverColor: showsHover ? colors_1.WHITE : colors_1.LIGHT_TEXT,
         }),
         ...(size === 'compact' ? compactInlineLabelButton : null),
-        ...(isSegmented ? segmentedMainAction : null),
         ...style,
-    }), [disabled, showsHover, isSegmented, size, style]);
+    }), [disabled, showsHover, size, style]);
     const mainContent = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderIcon ? (jsx_runtime_1.jsx("span", { style: { ...inlineLabelIcon, ...iconContainerStyle }, children: renderIcon(colors_1.CURRENT_COLOR) })) : null, jsx_runtime_1.jsx("span", { style: inlineLabelText, children: children })
         ] }));
     const mainAction = onClick ? (jsx_runtime_1.jsx("button", { className: `__remotion-inspector-quick-action ${hoverable_1.HOVERABLE_CLASS_NAME}`, type: "button", disabled: disabled, style: buttonStyle, title: title, onClick: onClick, children: mainContent })) : (jsx_runtime_1.jsx("div", { className: hoverable_1.HOVERABLE_CLASS_NAME, style: buttonStyle, title: title, children: mainContent }));
-    if (variant.type === 'segmented') {
-        const trailingStyle = {
-            ...segmentedTrailingAction,
-            ...(0, hoverable_1.hoverableStyle)({
-                idleBackground: colors_1.TRANSPARENT,
-                hoverBackground: variant.trailing.disabled
-                    ? colors_1.TRANSPARENT
-                    : (0, colors_1.getBackgroundFromHoverState)({ hovered: true, selected: false }),
-                idleColor: colors_1.LIGHT_TEXT,
-                hoverColor: variant.trailing.disabled ? colors_1.LIGHT_TEXT : colors_1.WHITE,
-            }),
-            height: size === 'compact'
-                ? layout_1.COMPACT_INLINE_ROW_HEIGHT
-                : layout_1.COMPACT_CONTROL_ROW_HEIGHT,
-            opacity: variant.trailing.disabled ? 0.35 : 1,
-        };
-        return (jsx_runtime_1.jsxs("div", { className: hoverable_1.HOVER_GROUP_CLASS_NAME, style: segmentedInlineAction, children: [mainAction, jsx_runtime_1.jsx("button", { type: "button", className: hoverable_1.HOVERABLE_CLASS_NAME, disabled: variant.trailing.disabled, style: trailingStyle, title: variant.trailing.title, onClick: variant.trailing.onClick, children: jsx_runtime_1.jsx("span", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: inlineLabelIcon, children: variant.trailing.renderIcon(colors_1.CURRENT_COLOR) }) })
-            ] }));
-    }
     return mainAction;
 };
 exports.InspectorQuickAction = InspectorQuickAction;

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

@@ -2,9 +2,9 @@ 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;
+export declare const isSequenceSectionSelection: (selection: import("@remotion/canvas").CanvasSelectionItem) => 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 declare const getSameSequenceInspectorSelection: (selections: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SameSequenceInspectorSelection | null;
 export {};

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

@@ -4,7 +4,6 @@ export declare const scrollableContainer: React.CSSProperties;
 export declare const compositionDefaultPropsSection: React.CSSProperties;
 export declare const compositionVisualControlsSection: React.CSSProperties;
 export declare const inspectorOverviewSection: React.CSSProperties;
-export declare const inspectorSectionDivider: React.CSSProperties;
 export declare const sequenceHeaderDivider: React.CSSProperties;
 export declare const sectionHeader: React.CSSProperties;
 export declare const inspectorSectionBody: React.CSSProperties;

package/dist/components/InspectorPanel/styles.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyframeEditorValue = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.inspectorQuickActionsSection = exports.detailsWithInlineAction = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.inspectorSectionBody = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.inspectorOverviewSection = exports.compositionVisualControlsSection = exports.compositionDefaultPropsSection = exports.scrollableContainer = exports.container = void 0;
+exports.keyframeEditorValue = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.inspectorQuickActionsSection = exports.detailsWithInlineAction = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.inspectorSectionBody = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorOverviewSection = exports.compositionVisualControlsSection = exports.compositionDefaultPropsSection = exports.scrollableContainer = exports.container = void 0;
 const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const layout_1 = require("../layout");
 exports.container = {
     backgroundColor: colors_1.BACKGROUND,
     color: colors_1.WHITE,
@@ -29,9 +30,6 @@ exports.inspectorOverviewSection = {
     display: 'flex',
     flexDirection: 'column',
 };
-exports.inspectorSectionDivider = {
-    borderBottom: `1px solid ${colors_1.LINE_COLOR}`,
-};
 exports.sequenceHeaderDivider = {
     backgroundColor: colors_1.LINE_COLOR,
     flexShrink: 0,
@@ -161,6 +159,7 @@ exports.detailRow = {
     display: 'flex',
     gap: 12,
     justifyContent: 'space-between',
+    minHeight: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
 };
 exports.detailLabel = {
     color: colors_1.LIGHT_TEXT,

package/dist/components/InspectorPanel/use-composition-actions.js

@@ -82,7 +82,6 @@ const useCompositionActions = () => {
                 ? await browserStudioOperations.insertSolid(request)
                 : await (0, call_api_1.callApi)('/api/insert-jsx-element', request);
             if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Added <Solid> to source file', 2000);
                 return;
             }
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);

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

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

package/dist/components/InspectorPanelLayout.d.ts

@@ -1 +1 @@
-export declare const INSPECTOR_PANEL_HORIZONTAL_PADDING = 12;
+export declare const INSPECTOR_PANEL_HORIZONTAL_PADDING = 10;

package/dist/components/InspectorPanelLayout.js

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

package/dist/components/InspectorSequenceSection.d.ts

@@ -3,11 +3,10 @@ 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';
 import { type FlatTreeRow } from '../helpers/timeline-layout';
-import { type TimelineSelection } from './Timeline/TimelineSelection';
 type SequenceWithControls = TSequence & {
     readonly controls: NonNullable<TSequence['controls']>;
 };
-export declare const getInspectorSelectableItems: (rows: readonly FlatTreeRow[]) => TimelineSelection[];
+export declare const getInspectorSelectableItems: (rows: readonly FlatTreeRow[]) => import("@remotion/canvas").CanvasSelectionItem[];
 export declare const hasSequenceControls: (sequence: TSequence) => sequence is SequenceWithControls;
 export declare const InspectorSequenceSection: React.FC<{
     readonly sequence: SequenceWithControls;

package/dist/components/InspectorSequenceSection.js

@@ -18,9 +18,9 @@ const transform_3d_mode_1 = require("../state/transform-3d-mode");
 const AssetFileIcon_1 = require("./AssetFileIcon");
 const InlineAction_1 = require("./InlineAction");
 const InlineCaptionInspector_1 = require("./InlineCaptionInspector");
+const CollapsibleInspectorSectionHeader_1 = require("./InspectorPanel/CollapsibleInspectorSectionHeader");
 const common_1 = require("./InspectorPanel/common");
 const inspector_section_collapse_1 = require("./InspectorPanel/inspector-section-collapse");
-const styles_1 = require("./InspectorPanel/styles");
 const asset_search_1 = require("./QuickSwitcher/asset-search");
 const border_radius_representation_1 = require("./Timeline/border-radius-representation");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
@@ -47,10 +47,6 @@ const emptyState = {
     lineHeight: 1.4,
     padding: '0 12px',
 };
-const effectsHeaderTitle = {
-    ...styles_1.sectionHeaderTitle,
-    flexShrink: 1,
-};
 const plusIcon = {
     width: 15,
     height: 15,
@@ -65,38 +61,6 @@ const transform3DToggleIcon = {
     height: 14,
     width: 14,
 };
-const collapsibleSectionHeaderButton = {
-    appearance: 'none',
-    backgroundColor: 'transparent',
-    border: 'none',
-    borderRadius: 3,
-    cursor: 'default',
-    display: 'block',
-    flex: 1,
-    fontFamily: 'Arial, Helvetica, sans-serif',
-    fontSize: 12,
-    fontWeight: 'bold',
-    lineHeight: '16px',
-    margin: 0,
-    minWidth: 0,
-    overflow: 'hidden',
-    padding: '4px 0',
-    textAlign: 'left',
-    textOverflow: 'ellipsis',
-    userSelect: 'none',
-    whiteSpace: 'nowrap',
-};
-const CollapsibleInspectorSectionHeader = ({ action, expanded, label, onToggle }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...collapsibleSectionHeaderButton,
-            color: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-        };
-    }, [hovered]);
-    return (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-            jsx_runtime_1.jsx("button", { type: "button", "aria-expanded": expanded, "aria-label": `${expanded ? 'Collapse' : 'Expand'} ${label}`, className: "__remotion-inspector-section-title", onClick: onToggle, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), style: style, children: label }), action] }));
-};
 const assetSelectorIcon = {
     flexShrink: 0,
     height: 18,
@@ -209,12 +173,12 @@ const persistInspectorSectionExpansionOverrides = (overrides) => {
         // Ignore quota errors or disabled storage.
     }
 };
-const getInspectorSectionExpansionKey = ({ nodePathInfo, groupId, }) => {
+const getInspectorSectionExpansionKey = ({ nodePathInfo, sectionId, }) => {
     return JSON.stringify([
         nodePathInfo.sequenceSubscriptionKey.absolutePath,
         nodePathInfo.sequenceSubscriptionKey.nodePath,
         nodePathInfo.index,
-        groupId,
+        sectionId,
     ]);
 };
 const getInspectorControlGroups = (rows) => {
@@ -375,7 +339,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
                 }
                 const expansionKey = getInspectorSectionExpansionKey({
                     nodePathInfo,
-                    groupId: group.id,
+                    sectionId: group.id,
                 });
                 const activity = getControlGroupActivity(group);
                 if (activity === 'active' && next[expansionKey] !== true) {
@@ -392,17 +356,17 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         });
     }, [controlGroups, getControlGroupActivity, nodePathInfo]);
     const isControlGroupExpanded = (0, react_1.useCallback)((group) => {
-        if (!(0, inspector_section_collapse_1.isSmartCollapsibleInspectorGroup)(group.id)) {
-            return true;
-        }
         const expansionKey = getInspectorSectionExpansionKey({
             nodePathInfo,
-            groupId: group.id,
+            sectionId: group.id,
         });
         const override = sectionExpansionOverrides[expansionKey];
         if (override !== undefined) {
             return override;
         }
+        if (!(0, inspector_section_collapse_1.isSmartCollapsibleInspectorGroup)(group.id)) {
+            return true;
+        }
         const automaticExpansion = automaticSectionExpansion[expansionKey];
         if (automaticExpansion !== undefined) {
             return automaticExpansion;
@@ -417,7 +381,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
     const toggleControlGroup = (0, react_1.useCallback)((group) => {
         const expansionKey = getInspectorSectionExpansionKey({
             nodePathInfo,
-            groupId: group.id,
+            sectionId: group.id,
         });
         const nextExpanded = !isControlGroupExpanded(group);
         setSectionExpansionOverrides((previous) => {
@@ -426,6 +390,28 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             return next;
         });
     }, [isControlGroupExpanded, nodePathInfo]);
+    const isAdditionalSectionExpanded = (0, react_1.useCallback)((sectionId) => {
+        var _a;
+        const expansionKey = getInspectorSectionExpansionKey({
+            nodePathInfo,
+            sectionId,
+        });
+        return (_a = sectionExpansionOverrides[expansionKey]) !== null && _a !== void 0 ? _a : true;
+    }, [nodePathInfo, sectionExpansionOverrides]);
+    const toggleAdditionalSection = (0, react_1.useCallback)((sectionId) => {
+        const expansionKey = getInspectorSectionExpansionKey({
+            nodePathInfo,
+            sectionId,
+        });
+        const nextExpanded = !isAdditionalSectionExpanded(sectionId);
+        setSectionExpansionOverrides((previous) => {
+            const next = { ...previous, [expansionKey]: nextExpanded };
+            persistInspectorSectionExpansionOverrides(next);
+            return next;
+        });
+    }, [isAdditionalSectionExpanded, nodePathInfo]);
+    const captionsExpanded = isAdditionalSectionExpanded('captions');
+    const effectsExpanded = isAdditionalSectionExpanded('effects');
     const visibleControlRows = controlGroups.flatMap((group) => {
         return isControlGroupExpanded(group) ? group.rows : [];
     });
@@ -509,26 +495,26 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             : show3DTransformControls
                 ? 'Hide 3D transform controls'
                 : 'Show 3D transform controls', hoveredColor: show3DTransformControls ? colors_1.BLUE : undefined, unhoveredColor: show3DTransformControls ? colors_1.BLUE : colors_1.LIGHT_TEXT, renderAction: (color) => (jsx_runtime_1.jsx(cube_1.CubeIcon, { color: color, style: transform3DToggleIcon })) }));
-    const effectsHeader = (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-            jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
+    const effectsHeader = (jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) }), expanded: effectsExpanded, label: "Effects", onToggle: () => toggleAdditionalSection('effects') }));
     const renderRow = ({ node, depth }) => {
         return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
     };
     const renderControlGroupHeader = (group) => {
-        const collapsible = (0, inspector_section_collapse_1.isSmartCollapsibleInspectorGroup)(group.id);
         const expanded = isControlGroupExpanded(group);
-        if (collapsible) {
-            return (jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader, { action: group.id === 'border-radius' && expanded ? borderRadiusAction : null, expanded: expanded, label: group.label, onToggle: () => toggleControlGroup(group) }));
-        }
-        return (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-                jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: group.label }), group.id === 'transforms' ? transform3DAction : null] }));
+        return (jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: expanded
+                ? group.id === 'border-radius'
+                    ? borderRadiusAction
+                    : group.id === 'transforms'
+                        ? transform3DAction
+                        : null
+                : null, expanded: expanded, label: group.label, onToggle: () => toggleControlGroup(group) }));
     };
     if (controlRows.length === 0 &&
         !showEffectsSection &&
         inlineCaptions === null) {
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Controls", children: jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" }) }) }));
     }
-    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(group), children: isControlGroupExpanded(group) ? (group.id === 'transforms' ? (jsx_runtime_1.jsxs(Transform3DModeContext_1.Transform3DModeContext.Provider, { value: show3DTransformControls, children: [renderTransformControls(), group.rows.map(renderRow)] })) : (group.rows.map(renderRow))) : null }, group.id))) })) : null, inlineCaptions ? (jsx_runtime_1.jsx(InlineCaptionInspector_1.InlineCaptionInspector, { captions: inlineCaptions, controls: sequence.controls, nodePath: nodePathInfo.sequenceSubscriptionKey, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(layoutGroup), children: isControlGroupExpanded(layoutGroup)
+    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(group), children: isControlGroupExpanded(group) ? (group.id === 'transforms' ? (jsx_runtime_1.jsxs(Transform3DModeContext_1.Transform3DModeContext.Provider, { value: show3DTransformControls, children: [renderTransformControls(), group.rows.map(renderRow)] })) : (group.rows.map(renderRow))) : null }, group.id))) })) : null, inlineCaptions ? (jsx_runtime_1.jsx(InlineCaptionInspector_1.InlineCaptionInspector, { captions: inlineCaptions, controls: sequence.controls, expanded: captionsExpanded, nodePath: nodePathInfo.sequenceSubscriptionKey, onToggle: () => toggleAdditionalSection('captions'), readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectsExpanded && effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(layoutGroup), children: isControlGroupExpanded(layoutGroup)
                             ? layoutGroup.rows.map(renderRow)
                             : null }) })) : null] }) }));
 };

package/dist/components/InspectorSourceLocation.js

@@ -82,7 +82,7 @@ const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon, size =
         return null;
     }
     if (size === 'quick-action') {
-        return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canOpen, onClick: onClick, renderIcon: (iconColor) => renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon(iconColor), size: "compact", title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, children: label }));
+        return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canOpen, onClick: onClick, renderIcon: (iconColor) => renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon(iconColor), title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, children: label }));
     }
     return (jsx_runtime_1.jsxs("button", { type: "button", style: style, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [renderIcon ? renderIcon(color) : null, jsx_runtime_1.jsx("span", { style: sourceLocationLabelStyle, children: label })
         ] }));

package/dist/components/InstallPackage.d.ts

@@ -1,5 +1,6 @@
 import type { PackageManager } from '@remotion/studio-shared';
 import React from 'react';
-export declare const InstallPackageModal: React.FC<{
+export declare const InstallPackageSettings: React.FC<{
+    readonly footerContainer: HTMLElement | null;
     readonly packageManager: PackageManager | null;
 }>;

package/dist/components/InstallPackage.js

@@ -32,11 +32,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InstallPackageModal = void 0;
+exports.InstallPackageSettings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
 const remotion_1 = require("remotion");
 const install_package_1 = require("../api/install-package");
 const restart_studio_1 = require("../api/restart-studio");
@@ -51,17 +55,40 @@ const layout_1 = require("./layout");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const ModalButton_1 = require("./ModalButton");
 const ModalFooter_1 = require("./ModalFooter");
-const ModalHeader_1 = require("./ModalHeader");
-const DismissableModal_1 = require("./NewComposition/DismissableModal");
 const container = {
-    padding: 20,
-    maxHeight: 400,
+    boxSizing: 'border-box',
+    flex: 1,
+    fontFamily: 'sans-serif',
+    minHeight: 0,
     overflowY: 'auto',
+    padding: '16px 16px 0',
+};
+const settingsContainer = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    minHeight: 0,
+    minWidth: 0,
 };
 const text = {
     fontSize: 14,
 };
-const InstallPackageModal = ({ packageManager }) => {
+const footer = {
+    flex: 'none',
+};
+const packageRow = {
+    alignItems: 'center',
+    borderBottom: colors_1.BORDER_WHITE_ALPHA_12,
+    display: 'flex',
+    gap: 10,
+    minHeight: 52,
+    padding: '4px 0',
+};
+const lastPackageRow = {
+    ...packageRow,
+    borderBottom: 'none',
+};
+const InstallPackageSettings = ({ footerContainer, packageManager }) => {
     const [state, setState] = react_1.default.useState({ type: 'idle' });
     const [map, setMap] = react_1.default.useState({});
     const { previewServerState: ctx } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -128,14 +155,14 @@ const InstallPackageModal = ({ packageManager }) => {
             enter.unregister();
         };
     }, [disabled, onClick, registerKeybinding]);
-    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Install packages" }), jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: state.type === 'done' ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Installed package", selectedPackages.length === 1 ? '' : 's', ' ', "successfully.", packageManager === null
+    const installablePackages = Object.entries(studio_shared_1.installableMap).filter(([, install]) => install);
+    const packageCount = installablePackages.length + studio_shared_1.extraPackages.length;
+    return (jsx_runtime_1.jsxs("div", { style: settingsContainer, children: [
+            jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: state.type === 'done' ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Installed package", selectedPackages.length === 1 ? '' : 's', ' ', "successfully.", packageManager === null
                             ? null
                             : ' Restart the server to complete.'] })) : state.type === 'restarting' ? (jsx_runtime_1.jsx("div", { style: text, children: "Restarting the Studio server..." })) : state.type === 'installing' ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Installing package", selectedPackages.length === 1 ? '' : 's', packageManager === null
                             ? '.'
-                            : '. Check your terminal for progress.'] })) : (jsx_runtime_1.jsxs("div", { style: text, children: [Object.entries(studio_shared_1.installableMap)
-                            .filter(([, install]) => install)
-                            .map(([pkgShort]) => {
+                            : '. Check your terminal for progress.'] })) : (jsx_runtime_1.jsxs("div", { style: text, role: "list", "aria-label": "Remotion packages", children: [installablePackages.map(([pkgShort], index) => {
                             var _a;
                             var _b;
                             const pkg = pkgShort === 'core' ? 'remotion' : `@remotion/${pkgShort}`;
@@ -148,35 +175,38 @@ const InstallPackageModal = ({ packageManager }) => {
                             if (!description) {
                                 throw new Error('No description for ' + pkg);
                             }
-                            return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                            return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", role: "listitem", style: index === packageCount - 1 ? lastPackageRow : packageRow, children: [
                                     jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: map[pkg], name: pkg, onChange: () => {
                                             setMap((prev) => ({ ...prev, [pkg]: !prev[pkg] }));
-                                        }, disabled: !canSelectPackages || isInstalled }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 }), jsx_runtime_1.jsx(InstallablePackage_1.InstallablePackageComp, { description: description, isInstalled: isInstalled, link: link, pkg: pkg })
+                                        }, disabled: !canSelectPackages || isInstalled }), jsx_runtime_1.jsx(InstallablePackage_1.InstallablePackageComp, { description: description, isInstalled: isInstalled, link: link, pkg: pkg })
                                 ] }, pkg));
-                        }), studio_shared_1.extraPackages.map((extraPkg) => {
+                        }), studio_shared_1.extraPackages.map((extraPkg, index) => {
                             var _a;
                             var _b;
                             const isInstalled = (_b = (_a = window.remotion_installedPackages) === null || _a === void 0 ? void 0 : _a.includes(extraPkg.name)) !== null && _b !== void 0 ? _b : false;
-                            return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                            return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", role: "listitem", style: installablePackages.length + index === packageCount - 1
+                                    ? lastPackageRow
+                                    : packageRow, children: [
                                     jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: map[extraPkg.name], name: extraPkg.name, onChange: () => {
                                             setMap((prev) => ({
                                                 ...prev,
                                                 [extraPkg.name]: !prev[extraPkg.name],
                                             }));
-                                        }, disabled: !canSelectPackages || isInstalled }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 }), jsx_runtime_1.jsx(InstallablePackage_1.InstallablePackageComp, { description: extraPkg.description, isInstalled: isInstalled, link: extraPkg.docsUrl, pkg: `${extraPkg.name}@${extraPkg.version}` })
+                                        }, disabled: !canSelectPackages || isInstalled }), jsx_runtime_1.jsx(InstallablePackage_1.InstallablePackageComp, { description: extraPkg.description, isInstalled: isInstalled, link: extraPkg.docsUrl, pkg: `${extraPkg.name}@${extraPkg.version}` })
                                 ] }, extraPkg.name));
-                        })] })) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [state.type === 'idle' ? (jsx_runtime_1.jsxs("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 }, children: ["This will install ", selectedPackages.length, " package", selectedPackages.length === 1 ? '' : 's', jsx_runtime_1.jsx("br", {}), packageManager === null
-                                    ? `in this project, Remotion v${remotion_1.VERSION}`
-                                    : `using ${packageManager}, Remotion v${remotion_1.VERSION}`] })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onClick, disabled: disabled, children: [state.type === 'restarting'
-                                    ? 'Restarting...'
-                                    : state.type === 'installing'
-                                        ? 'Installing...'
-                                        : state.type === 'done'
-                                            ? packageManager === null
-                                                ? 'Done'
-                                                : 'Restart Server'
-                                            : 'Install', disabled ? null : jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })
-                    ] }) })
-        ] }));
+                        })] })) }), footerContainer
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [state.type === 'idle' ? (jsx_runtime_1.jsxs("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 }, children: ["This will install ", selectedPackages.length, " package", selectedPackages.length === 1 ? '' : 's', jsx_runtime_1.jsx("br", {}), packageManager === null
+                                        ? `in this project, Remotion v${remotion_1.VERSION}`
+                                        : `using ${packageManager}, Remotion v${remotion_1.VERSION}`] })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onClick, disabled: disabled, children: [state.type === 'restarting'
+                                        ? 'Restarting...'
+                                        : state.type === 'installing'
+                                            ? 'Installing...'
+                                            : state.type === 'done'
+                                                ? packageManager === null
+                                                    ? 'Done'
+                                                    : 'Restart Server'
+                                                : 'Install', disabled ? null : jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })
+                        ] }) }), footerContainer)
+                : null] }));
 };
-exports.InstallPackageModal = InstallPackageModal;
+exports.InstallPackageSettings = InstallPackageSettings;

package/dist/components/InstallablePackage.js

@@ -4,18 +4,44 @@ exports.InstallablePackageComp = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
 const FONT_SIZE = 13;
+const container = {
+    alignItems: 'center',
+    display: 'flex',
+    flex: 1,
+    gap: 10,
+    minWidth: 0,
+};
+const packageDetails = {
+    flex: 1,
+    minWidth: 0,
+};
+const packageName = {
+    color: colors_1.WHITE,
+    display: 'block',
+    fontFamily: 'monospace',
+    fontSize: FONT_SIZE,
+    lineHeight: 1.4,
+    overflow: 'hidden',
+    textDecoration: 'none',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const descriptionStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: FONT_SIZE,
+    lineHeight: 1.4,
+};
+const status = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 12,
+    lineHeight: 1.4,
+    whiteSpace: 'nowrap',
+};
 const InstallablePackageComp = ({ isInstalled, pkg, link, description }) => {
-    return (jsx_runtime_1.jsxs("div", { style: {
-            fontSize: FONT_SIZE,
-            lineHeight: 1.2,
-            paddingBottom: 4,
-            paddingTop: 4,
-        }, children: [
-            jsx_runtime_1.jsx("a", { href: link, style: {
-                    fontSize: FONT_SIZE,
-                    color: colors_1.WHITE_HEX,
-                    textDecoration: 'none',
-                }, target: "_blank", children: pkg }), ' ', isInstalled ? (jsx_runtime_1.jsx("span", { style: { opacity: 0.3, fontSize: 'inherit' }, children: "(installed)" })) : null, jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: FONT_SIZE }, children: description })
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsxs("div", { style: packageDetails, children: [
+                    jsx_runtime_1.jsx("a", { href: link, style: packageName, target: "_blank", children: pkg }), jsx_runtime_1.jsx("div", { style: descriptionStyle, children: description })
+                ] }), jsx_runtime_1.jsx("span", { style: status, children: isInstalled ? 'Installed' : 'Not installed' })
         ] }));
 };
 exports.InstallablePackageComp = InstallablePackageComp;

package/dist/components/KeyboardShortcutsSettings.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const KeyboardShortcutsSettings: React.FC;