@remotion/studio 4.0.524 → 4.0.526

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

@@ -6,6 +6,10 @@ export declare const InspectorSectionHeader: React.FC<{
 export declare const InspectorQuickActionsSection: React.FC<{
     readonly children: React.ReactNode;
 }>;
+export declare const InspectorSectionBody: React.FC<{
+    readonly children: React.ReactNode;
+    readonly expanded: boolean;
+}>;
 export declare const InspectorSection: React.FC<{
     readonly children: React.ReactNode;
     readonly header: React.ReactNode;

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.InspectorSectionHeader = void 0;
+exports.InspectorDefaultPropsWarnings = exports.InspectorQuickAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackAction = exports.InspectorSection = exports.InspectorSectionBody = 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");
@@ -16,9 +16,21 @@ const InspectorSectionHeader = ({ children }) => jsx_runtime_1.jsx("div", { styl
 exports.InspectorSectionHeader = InspectorSectionHeader;
 const InspectorQuickActionsSection = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.inspectorQuickActionsSection, children: children });
 exports.InspectorQuickActionsSection = InspectorQuickActionsSection;
+const collapsedSectionBody = {
+    ...styles_1.inspectorSectionBody,
+    display: 'none',
+};
+const InspectorSectionBody = ({ children, expanded }) => {
+    if (children === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("div", { hidden: !expanded, style: expanded ? styles_1.inspectorSectionBody : collapsedSectionBody, children: children }));
+};
+exports.InspectorSectionBody = InspectorSectionBody;
 const InspectorSection = ({ children, header }) => {
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            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 }), jsx_runtime_1.jsx(exports.InspectorSectionBody, { expanded: true, children: children })
+        ] }));
 };
 exports.InspectorSection = InspectorSection;
 const backArrowIcon = {

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

@@ -2,15 +2,12 @@ import type React from 'react';
 export declare const container: React.CSSProperties;
 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 sequenceHeaderDivider: React.CSSProperties;
 export declare const sectionHeader: React.CSSProperties;
 export declare const inspectorSectionBody: React.CSSProperties;
 export declare const sequenceHeaderSubtitle: React.CSSProperties;
 export declare const sectionHeaderRow: React.CSSProperties;
-export declare const sectionHeaderTitle: React.CSSProperties;
-export declare const sectionHeaderStart: React.CSSProperties;
 export declare const sectionHeaderEnd: React.CSSProperties;
 export declare const defaultPropsWarningContainer: React.CSSProperties;
 export declare const defaultPropsWarningMessages: React.CSSProperties;

package/dist/components/InspectorPanel/styles.js

@@ -1,6 +1,6 @@
 "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.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.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.inspectorSectionBody = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorOverviewSection = exports.compositionDefaultPropsSection = exports.scrollableContainer = exports.container = void 0;
 const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const layout_1 = require("../layout");
@@ -22,10 +22,6 @@ exports.compositionDefaultPropsSection = {
     display: 'flex',
     flexDirection: 'column',
 };
-exports.compositionVisualControlsSection = {
-    display: 'flex',
-    flexDirection: 'column',
-};
 exports.inspectorOverviewSection = {
     display: 'flex',
     flexDirection: 'column',
@@ -76,28 +72,6 @@ exports.sectionHeaderRow = {
     justifyContent: 'space-between',
     minWidth: 0,
 };
-exports.sectionHeaderTitle = {
-    alignItems: 'center',
-    color: colors_1.LIGHT_TEXT,
-    display: 'flex',
-    flexShrink: 0,
-    fontFamily: 'sans-serif',
-    fontSize: 12,
-    fontWeight: 'bold',
-    lineHeight: '16px',
-    minHeight: 24,
-    minWidth: 0,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    userSelect: 'none',
-    whiteSpace: 'nowrap',
-};
-exports.sectionHeaderStart = {
-    alignItems: 'center',
-    display: 'flex',
-    gap: 8,
-    minWidth: 0,
-};
 exports.sectionHeaderEnd = {
     alignItems: 'center',
     display: 'flex',

package/dist/components/InspectorPanel/use-composition-actions.d.ts

@@ -5,7 +5,9 @@ export declare const useCompositionActions: () => {
     canShowInsertAsset: boolean;
     canShowInsertComposition: boolean;
     canShowInsertSolid: boolean;
+    canShowGenerateWithAgent: boolean;
     insertAsset: () => void;
     insertComposition: () => void;
     insertSolid: () => Promise<void>;
+    generateWithAgent: () => void;
 };

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

@@ -57,6 +57,9 @@ const useCompositionActions = () => {
     const canInsertAsset = canShowInsertAsset && !isAddingAsset;
     const canShowInsertComposition = canShowInsertAsset;
     const canInsertComposition = canShowInsertComposition && !isAddingComposition;
+    const canShowGenerateWithAgent = previewInteractive &&
+        !window.remotion_isReadOnlyStudio &&
+        currentCompositionId !== null;
     const insertSolid = (0, react_1.useCallback)(async () => {
         if (!canInsertSolid ||
             currentCompositionId === null ||
@@ -231,6 +234,16 @@ const useCompositionActions = () => {
         onCompositionSelected,
         setSelectedModal,
     ]);
+    const generateWithAgent = (0, react_1.useCallback)(() => {
+        var _a;
+        if (currentCompositionId === null) {
+            return;
+        }
+        setSelectedModal({
+            type: 'generate-with-agent',
+            location: (_a = compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.location) !== null && _a !== void 0 ? _a : null,
+        });
+    }, [compositionComponentInfo, currentCompositionId, setSelectedModal]);
     return {
         canInsertAsset,
         canInsertComposition,
@@ -238,9 +251,11 @@ const useCompositionActions = () => {
         canShowInsertAsset,
         canShowInsertComposition,
         canShowInsertSolid,
+        canShowGenerateWithAgent,
         insertAsset,
         insertComposition,
         insertSolid,
+        generateWithAgent,
     };
 };
 exports.useCompositionActions = useCompositionActions;

package/dist/components/InspectorPanel/use-inspector-section-expanded.d.ts

@@ -0,0 +1 @@
+export declare const useInspectorSectionExpanded: (sectionId: string) => readonly [boolean, (expanded: boolean) => void];

package/dist/components/InspectorPanel/use-inspector-section-expanded.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInspectorSectionExpanded = void 0;
+const react_1 = require("react");
+const persist_boolean_map_1 = require("../../helpers/persist-boolean-map");
+const storageKey = 'remotion.editor.inspectorCollapsedSections';
+const useInspectorSectionExpanded = (sectionId) => {
+    const [collapsedSections, setCollapsedSections] = (0, react_1.useState)(() => (0, persist_boolean_map_1.loadPersistedBooleanMap)(storageKey));
+    const setExpanded = (0, react_1.useCallback)((expanded) => {
+        setCollapsedSections((previous) => ({
+            ...previous,
+            [sectionId]: !expanded,
+        }));
+        (0, persist_boolean_map_1.persistBooleanMap)(storageKey, {
+            ...(0, persist_boolean_map_1.loadPersistedBooleanMap)(storageKey),
+            [sectionId]: !expanded,
+        });
+    }, [sectionId]);
+    return [!collapsedSections[sectionId], setExpanded];
+};
+exports.useInspectorSectionExpanded = useInspectorSectionExpanded;

package/dist/components/InspectorSequenceSection.js

@@ -21,7 +21,6 @@ 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 border_radius_representation_1 = require("./Timeline/border-radius-representation");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
@@ -51,10 +50,6 @@ const plusIcon = {
     width: 15,
     height: 15,
 };
-const effectsHeaderTitle = {
-    ...styles_1.sectionHeaderTitle,
-    flexShrink: 1,
-};
 const borderRadiusToggleIcon = {
     flexShrink: 0,
     height: 15,
@@ -207,21 +202,30 @@ const hasSequenceControls = (sequence) => {
 exports.hasSequenceControls = hasSequenceControls;
 const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderTransformControls, }) => {
     var _a;
+    var _b;
     const { tree, propStatuses, runtimeValues } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
         includeTextContent: true,
         includeSourceControls: true,
     });
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { inspectorRevealRequest, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const selectedEffect = selectedItems.length === 1 &&
         (selectedItems[0].type === 'sequence-effect' ||
             selectedItems[0].type === 'sequence-effect-prop')
         ? selectedItems[0]
         : null;
     const selectedEffectKey = selectedEffect === null ? null : (0, TimelineSelection_1.getTimelineSelectionKey)(selectedEffect);
+    const inspectorRevealItem = inspectorRevealRequest === null || inspectorRevealRequest === void 0 ? void 0 : inspectorRevealRequest.item;
+    const inspectorRevealItemKey = (inspectorRevealItem === null || inspectorRevealItem === void 0 ? void 0 : inspectorRevealItem.type) === 'sequence-effect' ||
+        (inspectorRevealItem === null || inspectorRevealItem === void 0 ? void 0 : inspectorRevealItem.type) === 'sequence-effect-prop'
+        ? (0, TimelineSelection_1.getTimelineSelectionKey)(inspectorRevealItem)
+        : null;
+    const inspectorRevealToken = inspectorRevealItemKey === selectedEffectKey
+        ? ((_b = inspectorRevealRequest === null || inspectorRevealRequest === void 0 ? void 0 : inspectorRevealRequest.token) !== null && _b !== void 0 ? _b : null)
+        : null;
     const selectedEffectRowRef = (0, react_1.useRef)(null);
-    const scrolledEffectKey = (0, react_1.useRef)(null);
+    const scrolledInspectorRevealToken = (0, react_1.useRef)(null);
     const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(loadInspectorCollapsedKeys);
     const [sectionExpansionOverrides, setSectionExpansionOverrides] = (0, react_1.useState)(loadInspectorSectionExpansionOverrides);
     const [automaticSectionExpansion, setAutomaticSectionExpansion] = (0, react_1.useState)({});
@@ -284,33 +288,61 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             return next;
         });
     }, []);
-    const { controlRows, effectRows } = (0, react_1.useMemo)(() => {
+    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 setAdditionalSectionExpanded = (0, react_1.useCallback)((sectionId, expanded) => {
+        const expansionKey = getInspectorSectionExpansionKey({
+            nodePathInfo,
+            sectionId,
+        });
+        setSectionExpansionOverrides((previous) => {
+            if (previous[expansionKey] === expanded) {
+                return previous;
+            }
+            const next = { ...previous, [expansionKey]: expanded };
+            persistInspectorSectionExpansionOverrides(next);
+            return next;
+        });
+    }, [nodePathInfo]);
+    const toggleAdditionalSection = (0, react_1.useCallback)((sectionId) => {
+        setAdditionalSectionExpanded(sectionId, !isAdditionalSectionExpanded(sectionId));
+    }, [isAdditionalSectionExpanded, setAdditionalSectionExpanded]);
+    const effectsExpanded = isAdditionalSectionExpanded('effects');
+    const { controlRows, effectRows, hasEffects } = (0, react_1.useMemo)(() => {
         const controlNodes = [];
-        let effectsRoot = null;
+        let root = null;
         for (const node of tree) {
             if (isEffectsRoot(node)) {
-                effectsRoot = node;
+                root = node;
             }
             else {
                 controlNodes.push(node);
             }
         }
         return {
+            hasEffects: root !== null && root.children.length > 0,
             controlRows: (0, timeline_layout_1.flattenVisibleTreeNodes)({
                 nodes: controlNodes,
                 getIsExpanded,
             }),
-            effectRows: effectsRoot === null
+            effectRows: root === null || !effectsExpanded
                 ? []
                 : (0, timeline_layout_1.flattenVisibleTreeNodes)({
-                    nodes: effectsRoot.children,
+                    nodes: root.children,
                     getIsExpanded,
                 }),
         };
-    }, [getIsExpanded, tree]);
+    }, [effectsExpanded, getIsExpanded, tree]);
     (0, react_1.useEffect)(() => {
         if (selectedEffectKey === null ||
-            scrolledEffectKey.current === selectedEffectKey) {
+            inspectorRevealToken === null ||
+            scrolledInspectorRevealToken.current === inspectorRevealToken) {
             return;
         }
         const rows = (0, timeline_layout_1.flattenVisibleTreeNodes)({
@@ -325,6 +357,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         if (targetIndex === -1) {
             return;
         }
+        setAdditionalSectionExpanded('effects', true);
         const parentKeys = [];
         let { depth } = rows[targetIndex];
         for (let i = targetIndex - 1; i >= 0 && depth > 0; i--) {
@@ -344,19 +377,23 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             persistInspectorCollapsedKeys(next);
             return next;
         });
-    }, [selectedEffectKey, tree]);
+    }, [
+        inspectorRevealToken,
+        selectedEffectKey,
+        setAdditionalSectionExpanded,
+        tree,
+    ]);
     (0, react_1.useEffect)(() => {
-        if (selectedEffectKey === null) {
-            scrolledEffectKey.current = null;
+        if (inspectorRevealToken === null) {
             return;
         }
-        if (scrolledEffectKey.current === selectedEffectKey ||
+        if (scrolledInspectorRevealToken.current === inspectorRevealToken ||
             selectedEffectRowRef.current === null) {
             return;
         }
         selectedEffectRowRef.current.scrollIntoView({ block: 'center' });
-        scrolledEffectKey.current = selectedEffectKey;
-    }, [effectRows, selectedEffectKey]);
+        scrolledInspectorRevealToken.current = inspectorRevealToken;
+    }, [effectRows, inspectorRevealToken]);
     const effectSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(effectRows), [effectRows]);
     const controlGroups = (0, react_1.useMemo)(() => getInspectorControlGroups(controlRows), [controlRows]);
     const layoutGroup = controlGroups.find((group) => group.id === 'layout');
@@ -450,26 +487,6 @@ 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 visibleControlRows = controlGroups.flatMap((group) => {
         return isControlGroupExpanded(group) ? group.rows : [];
@@ -490,7 +507,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             ? runtimeValues.captions
             : []
         : null;
-    const showEffectsSection = nodePathInfo.supportsEffects || effectRows.length > 0;
+    const showEffectsSection = nodePathInfo.supportsEffects || hasEffects;
     const canAddEffect = nodePathInfo.supportsEffects &&
         previewServerState.type === 'connected' &&
         (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
@@ -499,6 +516,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         if (!canAddEffect || previewServerState.type !== 'connected') {
             return;
         }
+        setAdditionalSectionExpanded('effects', true);
         setSelectedModal({
             type: 'add-effect',
             clientId: previewServerState.clientId,
@@ -509,6 +527,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         canAddEffect,
         nodePathInfo.sequenceSubscriptionKey,
         previewServerState,
+        setAdditionalSectionExpanded,
         setSelectedModal,
         validatedLocation.source,
     ]);
@@ -554,8 +573,7 @@ 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: hasEffects ? () => toggleAdditionalSection('effects') : null }));
     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)));
     };

package/dist/components/InspectorSourceLocation.js

@@ -43,6 +43,7 @@ const sourceLocationLabelStyle = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon, size = 'default' }) => {

package/dist/components/KeyboardShortcutsSettings.js

@@ -37,7 +37,9 @@ exports.KeyboardShortcutsSettings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const settings_tab_availability_1 = require("../helpers/settings-tab-availability");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const caret_1 = require("../icons/caret");
 const Checkbox_1 = require("./Checkbox");
@@ -158,6 +160,12 @@ const KeyboardShortcutsSettings = () => {
     var _a;
     const { error: settingsError, revision, studioRuntimeConfig } = (0, SettingsContext_1.useSettings)();
     const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const canEdit = (0, settings_tab_availability_1.canEditStudioConfig)({
+        isBrowserStudio,
+        previewServerConnected: previewServerState.type === 'connected',
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+    });
     const [enabled, setEnabled] = (0, react_1.useState)(true);
     const [configuredShortcuts, setConfiguredShortcuts] = (0, react_1.useState)({});
     const [enabledEdited, setEnabledEdited] = (0, react_1.useState)(false);
@@ -212,7 +220,7 @@ const KeyboardShortcutsSettings = () => {
     }, [configuredShortcuts, enabled, enabledEdited, shortcutsEdited]);
     const ready = studioRuntimeConfig !== null && syncedRevision === revision;
     (0, use_auto_save_config_1.useAutoSaveConfig)({
-        enabled: ready && !isBrowserStudio,
+        enabled: ready && canEdit,
         onError: setError,
         ready,
         syncRevision: syncedRevision,
@@ -221,11 +229,11 @@ const KeyboardShortcutsSettings = () => {
     if (studioRuntimeConfig === null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [isBrowserStudio ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [canEdit ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx("p", { style: dividerLabel, children: "General" }), jsx_runtime_1.jsxs("label", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Keyboard shortcuts" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: enabled, name: "keyboard-shortcuts", onChange: onEnabledChange }) })
                         ] })
-                ] })), visibleShortcutGroups.map((group, groupIndex) => (jsx_runtime_1.jsxs("div", { children: [
+                ] })) : null, visibleShortcutGroups.map((group, groupIndex) => (jsx_runtime_1.jsxs("div", { children: [
                     jsx_runtime_1.jsx("p", { style: shortcutSectionTitle, children: group.name }), jsx_runtime_1.jsx("div", { role: "list", "aria-label": group.name, children: group.shortcuts.map((shortcut, shortcutIndex) => {
                             var _a;
                             const configured = shortcut.actionId === null
@@ -306,7 +314,7 @@ const KeyboardShortcutsSettings = () => {
                                     shortcutIndex === group.shortcuts.length - 1
                                     ? lastShortcutRow
                                     : shortcutRow, children: [
-                                    jsx_runtime_1.jsx("span", { style: actionName, children: shortcut.action }), shortcut.actionId === null || isBrowserStudio ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                    jsx_runtime_1.jsx("span", { style: actionName, children: shortcut.action }), shortcut.actionId === null || !canEdit ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                             jsx_runtime_1.jsx("span", { style: shortcutCell, children: jsx_runtime_1.jsx(ShortcutChords, { values: shortcutValues }) }), jsx_runtime_1.jsx("span", {})
                                         ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                             jsx_runtime_1.jsx("span", { style: shortcutCell, children: jsx_runtime_1.jsx("button", { id: shortcutButtonId, type: "button", style: chordButton, "aria-label": `Change shortcut for ${shortcut.action}`, onClick: () => {

package/dist/components/LoopToggle.js

@@ -10,6 +10,7 @@ const loop_1 = require("../state/loop");
 const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
 const accessibilityLabel = 'Loop';
+const buttonStyle = { width: 30 };
 const toggleLoop = (setLoop) => {
     setLoop((currentLoop) => {
         (0, loop_1.persistLoopOption)(!currentLoop);
@@ -24,6 +25,6 @@ const LoopToggle = ({ loop, setLoop }) => {
     const onClick = (0, react_1.useCallback)(() => {
         (0, exports.toggleLoop)(setLoop);
     }, [setLoop]);
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": loop, onClick: onClick, children: (color) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : color, d: "M384 150.3V41.6l64 53.3v2l-64 53.3zM352 23.5V80H192C86 80 0 166 0 272c0 8.8 7.2 16 16 16s16-7.2 16-16c0-88.4 71.6-160 160-160h160v56.5c0 13 10.5 23.5 23.5 23.5 5.5 0 10.8-1.9 15-5.4l78-65c7.3-6.1 11.5-15.1 11.5-24.6v-2c0-9.5-4.2-18.5-11.5-24.6l-78-65c-4.2-3.5-9.5-5.4-15-5.4-13 0-23.5 10.5-23.5 23.5zM128 415.9v54.5l-64-53.3v-2l64-53.3v54.1zM160 400v-56.5c0-13-10.5-23.5-23.5-23.5-5.5 0-10.8 1.9-15 5.4l-78 65C36.2 396.5 32 405.5 32 415v2c0 9.5 4.2 18.5 11.5 24.6l78 65c4.2 3.5 9.5 5.4 15 5.4 13 0 23.5-10.5 23.5-23.5V432h160c106 0 192-86 192-192 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 88.4-71.6 160-160 160H160z" }) })) }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": loop, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : color, d: "M384 150.3V41.6l64 53.3v2l-64 53.3zM352 23.5V80H192C86 80 0 166 0 272c0 8.8 7.2 16 16 16s16-7.2 16-16c0-88.4 71.6-160 160-160h160v56.5c0 13 10.5 23.5 23.5 23.5 5.5 0 10.8-1.9 15-5.4l78-65c7.3-6.1 11.5-15.1 11.5-24.6v-2c0-9.5-4.2-18.5-11.5-24.6l-78-65c-4.2-3.5-9.5-5.4-15-5.4-13 0-23.5 10.5-23.5 23.5zM128 415.9v54.5l-64-53.3v-2l64-53.3v54.1zM160 400v-56.5c0-13-10.5-23.5-23.5-23.5-5.5 0-10.8 1.9-15 5.4l-78 65C36.2 396.5 32 405.5 32 415v2c0 9.5 4.2 18.5 11.5 24.6l78 65c4.2 3.5 9.5 5.4 15 5.4 13 0 23.5-10.5 23.5-23.5V432h160c106 0 192-86 192-192 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 88.4-71.6 160-160 160H160z" }) })) }) }));
 };
 exports.LoopToggle = LoopToggle;

package/dist/components/LutPreview.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const LutPreview: React.FC<{
+    readonly src: string;
+}>;