@remotion/studio 4.0.525 → 4.0.527

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',
@@ -44,6 +40,7 @@ exports.sectionHeader = {
     lineHeight: '24px',
     padding: `4px 0 4px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 exports.inspectorSectionBody = {
     display: 'flex',
@@ -76,28 +73,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',
@@ -170,6 +145,7 @@ exports.detailLabel = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 exports.detailValue = {

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,10 @@ const useCompositionActions = () => {
     const canInsertAsset = canShowInsertAsset && !isAddingAsset;
     const canShowInsertComposition = canShowInsertAsset;
     const canInsertComposition = canShowInsertComposition && !isAddingComposition;
+    const canShowGenerateWithAgent = previewInteractive &&
+        !window.remotion_isReadOnlyStudio &&
+        browserStudioOperations === null &&
+        currentCompositionId !== null;
     const insertSolid = (0, react_1.useCallback)(async () => {
         if (!canInsertSolid ||
             currentCompositionId === null ||
@@ -231,6 +235,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 +252,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,
@@ -293,30 +288,57 @@ 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 ||
             inspectorRevealToken === null ||
@@ -335,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--) {
@@ -354,7 +377,12 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             persistInspectorCollapsedKeys(next);
             return next;
         });
-    }, [inspectorRevealToken, selectedEffectKey, tree]);
+    }, [
+        inspectorRevealToken,
+        selectedEffectKey,
+        setAdditionalSectionExpanded,
+        tree,
+    ]);
     (0, react_1.useEffect)(() => {
         if (inspectorRevealToken === null) {
             return;
@@ -459,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 : [];
@@ -499,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)() &&
@@ -508,6 +516,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         if (!canAddEffect || previewServerState.type !== 'connected') {
             return;
         }
+        setAdditionalSectionExpanded('effects', true);
         setSelectedModal({
             type: 'add-effect',
             clientId: previewServerState.clientId,
@@ -518,6 +527,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         canAddEffect,
         nodePathInfo.sequenceSubscriptionKey,
         previewServerState,
+        setAdditionalSectionExpanded,
         setSelectedModal,
         validatedLocation.source,
     ]);
@@ -563,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

@@ -28,11 +28,13 @@ const sourceLocationStyle = {
     textDecoration: 'none',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
     width: 'fit-content',
 };
 const quickActionStyle = {
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const sourceLocationLabelStyle = {
     color: 'inherit',
@@ -43,6 +45,8 @@ const sourceLocationLabelStyle = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
+    WebkitUserSelect: '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/LutPreview.d.ts

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

package/dist/components/LutPreview.js

@@ -0,0 +1,192 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LutPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const cube_lut_1 = require("../helpers/cube-lut");
+const hoverable_1 = require("../helpers/hoverable");
+const z_index_1 = require("../state/z-index");
+const sampleImage = 'https://remotion.media/transition-bg-blue.jpg';
+const previewWidth = 640;
+const previewHeight = 427;
+const container = {
+    padding: 24,
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    minHeight: 0,
+};
+const comparison = {
+    position: 'relative',
+    flexShrink: 0,
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const canvasStyle = {
+    display: 'block',
+    width: '100%',
+    height: 'auto',
+    borderRadius: 4,
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const sliderStyle = {
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.TRANSPARENT,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
+    position: 'absolute',
+    inset: 0,
+    borderRadius: 4,
+    cursor: 'default',
+    touchAction: 'none',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const dividerStyle = {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: 2,
+    backgroundColor: colors_1.CURRENT_COLOR,
+    transform: 'translateX(-50%)',
+    pointerEvents: 'none',
+};
+const handleStyle = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 32,
+    height: 32,
+    borderRadius: '50%',
+    border: `2px solid ${colors_1.CURRENT_COLOR}`,
+    backgroundColor: colors_1.BACKGROUND,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+const message = {
+    color: colors_1.LIGHT_TEXT,
+    textAlign: 'center',
+    overflowWrap: 'anywhere',
+};
+const LutPreview = ({ src }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    const beforeRef = (0, react_1.useRef)(null);
+    const afterRef = (0, react_1.useRef)(null);
+    const [state, setState] = (0, react_1.useState)({ type: 'loading' });
+    const [position, setPosition] = (0, react_1.useState)(50);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const size = player_1.PlayerInternals.useElementSize(containerRef, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const updatePosition = (0, react_1.useCallback)((event) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        setPosition(Math.max(0, Math.min(100, ((event.clientX - rect.left) / rect.width) * 100)));
+    }, []);
+    const onPointerDown = (0, react_1.useCallback)((event) => {
+        if (event.button !== 0 || !event.isPrimary) {
+            return;
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        updatePosition(event);
+    }, [updatePosition]);
+    const onPointerMove = (0, react_1.useCallback)((event) => {
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            updatePosition(event);
+        }
+    }, [updatePosition]);
+    const onKeyDown = (0, react_1.useCallback)((event) => {
+        const step = event.shiftKey ? 10 : 1;
+        if (event.key === 'Home') {
+            setPosition(0);
+        }
+        else if (event.key === 'End') {
+            setPosition(100);
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+            setPosition((value) => Math.max(0, value - step));
+        }
+        else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+            setPosition((value) => Math.min(100, value + step));
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const controller = new AbortController();
+        const image = new Image();
+        image.crossOrigin = 'anonymous';
+        setState({ type: 'loading' });
+        const load = async () => {
+            var _a, _b;
+            const response = await fetch(src, { signal: controller.signal });
+            if (!response.ok) {
+                throw new Error(`Could not load LUT (HTTP ${response.status}).`);
+            }
+            const lut = (0, cube_lut_1.parseCubeLut)(await response.text());
+            if (controller.signal.aborted) {
+                return;
+            }
+            image.src = sampleImage;
+            try {
+                await image.decode();
+            }
+            catch (_c) {
+                throw new Error('Could not load the LUT sample image. Check your internet connection.');
+            }
+            if (controller.signal.aborted) {
+                return;
+            }
+            const before = (_a = beforeRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
+            const after = (_b = afterRef.current) === null || _b === void 0 ? void 0 : _b.getContext('2d');
+            if (!before || !after) {
+                throw new Error('Could not create the LUT preview canvas.');
+            }
+            before.drawImage(image, 0, 0, previewWidth, previewHeight);
+            const pixels = before.getImageData(0, 0, previewWidth, previewHeight);
+            (0, cube_lut_1.applyCubeLut)(pixels.data, lut);
+            after.putImageData(pixels, 0, 0);
+            setState({ type: 'loaded' });
+        };
+        load().catch((error) => {
+            if (!controller.signal.aborted) {
+                setState({
+                    type: 'error',
+                    error: error instanceof Error ? error.message : String(error),
+                });
+            }
+        });
+        return () => {
+            controller.abort();
+            image.removeAttribute('src');
+        };
+    }, [src]);
+    return (jsx_runtime_1.jsxs("div", { ref: containerRef, style: container, children: [state.type === 'error' ? (jsx_runtime_1.jsxs("div", { style: message, role: "alert", children: ["Could not preview LUT: ", state.error] })) : state.type === 'loading' ? (jsx_runtime_1.jsx("div", { style: message, role: "status", children: "Loading LUT preview..." })) : null, jsx_runtime_1.jsxs("div", { style: {
+                    ...comparison,
+                    width: size
+                        ? Math.max(0, Math.min(960, size.width - 48, ((size.height - 48) * previewWidth) / previewHeight))
+                        : 0,
+                    display: state.type === 'loaded' ? 'block' : 'none',
+                }, children: [
+                    jsx_runtime_1.jsx("canvas", { ref: afterRef, width: previewWidth, height: previewHeight, style: canvasStyle, role: "img", "aria-label": "Sample image after LUT" }), jsx_runtime_1.jsx("div", { style: {
+                            position: 'absolute',
+                            inset: 0,
+                            clipPath: `inset(0 ${100 - position}% 0 0)`,
+                        }, children: jsx_runtime_1.jsx("canvas", { ref: beforeRef, width: previewWidth, height: previewHeight, style: canvasStyle, role: "img", "aria-label": "Sample image before LUT" }) }), jsx_runtime_1.jsx("div", { role: "slider", "aria-label": "Before and after comparison", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(position), "aria-valuetext": `${Math.round(position)}% before, ${100 - Math.round(position)}% after`, tabIndex: tabIndex, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: sliderStyle, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onKeyDown: onKeyDown, children: jsx_runtime_1.jsx("div", { "aria-hidden": true, style: { ...dividerStyle, left: `${position}%` }, children: jsx_runtime_1.jsx("div", { style: handleStyle, children: jsx_runtime_1.jsx("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", children: jsx_runtime_1.jsx("path", { d: "M8 8 4 12l4 4M16 8l4 4-4 4", stroke: colors_1.CURRENT_COLOR, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }) })
+                ] })
+        ] }));
+};
+exports.LutPreview = LutPreview;

package/dist/components/MenuBuildIndicator.js

@@ -15,6 +15,7 @@ const cwd = {
     alignItems: 'center',
     justifyContent: 'center',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const spinnerSize = 14;

package/dist/components/MenuCompositionName.js

@@ -4,7 +4,6 @@ exports.MenuCompositionName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const hoverable_1 = require("../helpers/hoverable");
 const noop_1 = require("../helpers/noop");
@@ -13,7 +12,7 @@ const composition_menu_items_1 = require("./composition-menu-items");
 const ContextMenu_1 = require("./ContextMenu");
 const InlineDropdown_1 = require("./InlineDropdown");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
-const use_default_editor_info_1 = require("./use-default-editor-info");
+const use_open_in_menu_apps_1 = require("./use-open-in-menu-apps");
 const baseStyle = {
     cursor: 'default',
     textDecoration: 'none',
@@ -66,18 +65,15 @@ const MenuCompositionName = () => {
     }, [canvasContent, compositions]);
     const asset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' ? canvasContent.asset : null;
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
-    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(connectionStatus === 'connected');
+    const { connectionStatus, openInApps } = (0, use_open_in_menu_apps_1.useOpenInMenuApps)();
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         return (0, composition_menu_items_1.getCompositionContextMenuItems)({
             closeMenu: noop_1.noop,
             composition,
             connectionStatus,
-            editorId: defaultEditorId,
-            editorName: defaultEditorName,
             includeCompositionManagementItems: true,
+            openInApps,
             resolvedLocation,
             setSelectedModal,
             readOnlyStudio: window.remotion_isReadOnlyStudio,
@@ -85,8 +81,7 @@ const MenuCompositionName = () => {
     }, [
         composition,
         connectionStatus,
-        defaultEditorId,
-        defaultEditorName,
+        openInApps,
         resolvedLocation,
         setSelectedModal,
     ]);