@remotion/studio 4.0.525 → 4.0.526

package/dist/components/CodeFrame.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const LazySyntaxHighlightedSource_1 = require("./LazySyntaxHighlightedSource");
+const is_menu_item_1 = require("./Menu/is-menu-item");
+const frame = {
+    backgroundColor: colors_1.ERROR_CODE_FRAME_BACKGROUND,
+    borderRadius: 6,
+    display: 'flex',
+    marginBottom: 20,
+    overflow: 'hidden',
+};
+const sourceContainer = {
+    flex: 1,
+    minWidth: 0,
+    overflowX: 'auto',
+    overscrollBehaviorX: 'none',
+};
+const lineNumberColumn = {
+    flexShrink: 0,
+    width: 60,
+};
+const lineNumber = {
+    whiteSpace: 'pre',
+    paddingRight: 12,
+    color: 'inherit',
+    lineHeight: 1.7,
+    width: 60,
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    fontFamily: 'monospace',
+};
+const CodeFrame = ({ source, lineNumberWidth, fontSize, horizontalMargin }) => {
+    return (jsx_runtime_1.jsxs("div", { style: {
+            ...frame,
+            marginLeft: horizontalMargin,
+            marginRight: horizontalMargin,
+        }, children: [
+            jsx_runtime_1.jsx("div", { style: lineNumberColumn, children: source.map((s, j) => {
+                    return (jsx_runtime_1.jsx("div", { style: {
+                            ...lineNumber,
+                            fontSize,
+                            backgroundColor: s.highlight
+                                ? colors_1.ERROR_CODE_FRAME_BACKGROUND
+                                : colors_1.ERROR_CODE_FRAME_LINE_BACKGROUND,
+                            backgroundImage: s.highlight
+                                ? `linear-gradient(${colors_1.SELECTED_BACKGROUND}, ${colors_1.SELECTED_BACKGROUND})`
+                                : undefined,
+                            color: s.highlight ? colors_1.WHITE : colors_1.WHITE_ALPHA_40,
+                        }, children: String(s.lineNumber).padStart(lineNumberWidth, ' ') }, j));
+                }) }), jsx_runtime_1.jsx("div", { style: sourceContainer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: { minWidth: '100%', width: 'max-content' }, children: source.map((s, j) => {
+                        return (jsx_runtime_1.jsx("div", { style: {
+                                backgroundColor: s.highlight
+                                    ? colors_1.SELECTED_BACKGROUND
+                                    : colors_1.TRANSPARENT,
+                            }, children: jsx_runtime_1.jsx("code", { className: "language-tsx", style: {
+                                    display: 'block',
+                                    fontFamily: 'monospace',
+                                    fontSize,
+                                    color: '#9cdcfe',
+                                    whiteSpace: 'pre',
+                                    tabSize: 2,
+                                    backgroundColor: colors_1.TRANSPARENT,
+                                    lineHeight: 1.7,
+                                    paddingRight: 12,
+                                    paddingLeft: 12,
+                                    paddingTop: 0,
+                                    paddingBottom: 0,
+                                }, children: jsx_runtime_1.jsx(LazySyntaxHighlightedSource_1.LazySyntaxHighlightedSource, { source: s.content }) }) }, j));
+                    }) }) })
+        ] }));
+};
+exports.CodeFrame = CodeFrame;

package/dist/components/CompositionSelectorItem.js

@@ -4,7 +4,6 @@ exports.CompositionSelectorItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = 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 hoverable_1 = require("../helpers/hoverable");
 const noop_1 = require("../helpers/noop");
@@ -23,7 +22,7 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
 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 itemStyle = {
     paddingRight: 2,
     paddingTop: 5,
@@ -193,9 +192,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         }
     }, [onClick]);
     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)(item.type === 'composition' ? item.composition.stack : item.folder.stack);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         if (item.type === 'composition') {
@@ -203,9 +200,8 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 closeMenu: noop_1.noop,
                 composition: item.composition,
                 connectionStatus,
-                editorId: defaultEditorId,
-                editorName: defaultEditorName,
                 includeCompositionManagementItems: true,
+                openInApps,
                 resolvedLocation,
                 setSelectedModal,
                 readOnlyStudio: window.remotion_isReadOnlyStudio,
@@ -214,21 +210,14 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         return (0, folder_menu_items_1.getFolderMenuItems)({
             closeMenu: noop_1.noop,
             connectionStatus,
-            editorId: defaultEditorId,
-            editorName: defaultEditorName,
+            editorId: openInApps.defaultEditorId,
+            editorName: openInApps.defaultEditorName,
             folder: item.folder,
             resolvedLocation,
             setSelectedModal,
             readOnlyStudio: window.remotion_isReadOnlyStudio,
         });
-    }, [
-        connectionStatus,
-        defaultEditorId,
-        defaultEditorName,
-        item,
-        resolvedLocation,
-        setSelectedModal,
-    ]);
+    }, [connectionStatus, item, openInApps, resolvedLocation, setSelectedModal]);
     const onItemDragStart = (0, react_1.useCallback)((event) => {
         var _a, _b, _c, _d, _e;
         if (window.remotion_isReadOnlyStudio) {

package/dist/components/CurrentAsset.js

@@ -25,6 +25,7 @@ const modals_1 = require("../state/modals");
 const AssetAudioVolume_1 = require("./AssetAudioVolume");
 const InlineEditableTitle_1 = require("./InlineEditableTitle");
 const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
+const CollapsibleInspectorSection_1 = require("./InspectorPanel/CollapsibleInspectorSection");
 const common_1 = require("./InspectorPanel/common");
 const InspectorPanelLayout_1 = require("./InspectorPanelLayout");
 const layout_1 = require("./layout");
@@ -246,12 +247,12 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, minHeight: exports.CURRENT_ASSET_HEIGHT, padding: contentSized
                     ? `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 6px`
-                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "File", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsxs("div", { style: assetMetadataStyle, children: [mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))), src ? (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Average volume", children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: jsx_runtime_1.jsx(AssetAudioVolume_1.AssetAudioVolume, { src: (_d = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _d !== void 0 ? _d : null, waveformSampleRate: volumeMetadata
+                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "File", sectionId: "asset-file", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Video", sectionId: "asset-video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: mediaSections.audio.length > 0, label: "Audio", sectionId: "asset-audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsxs("div", { style: assetMetadataStyle, children: [mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))), src ? (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Average volume", children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: jsx_runtime_1.jsx(AssetAudioVolume_1.AssetAudioVolume, { src: (_d = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _d !== void 0 ? _d : null, waveformSampleRate: volumeMetadata
                                         ? Math.ceil(volumeMetadata.fps *
                                             get_timeline_max_zoom_1.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM)
-                                        : null }, (_e = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _e !== void 0 ? _e : src) }) })) : null] })) })) : null, jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Actions" }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, src ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTranscribe, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: quickActionIconStyle })), children: "Transcribe" })) : null, fileType === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTrackMatting, renderIcon: (color) => (jsx_runtime_1.jsx(separation_1.SeparationIcon, { color: color, style: quickActionIconStyle })), children: "Separate foreground" })) : null, src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
-                            jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: convertArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
-                        ] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] })
+                                        : null }, (_e = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _e !== void 0 ? _e : src) }) })) : null] })) })) : null, jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "asset-actions", children: jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, src ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTranscribe, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: quickActionIconStyle })), children: "Transcribe" })) : null, fileType === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTrackMatting, renderIcon: (color) => (jsx_runtime_1.jsx(separation_1.SeparationIcon, { color: color, style: quickActionIconStyle })), children: "Separate foreground" })) : null, src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
+                                jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: convertArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
+                            ] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] }) })
         ] }));
 };
 exports.AssetInfo = AssetInfo;

package/dist/components/ElementInstallConfirmation.js

@@ -250,7 +250,8 @@ const ElementLibraryAddConfirmation = ({ displayName, origin, url }) => {
 };
 exports.ElementLibraryAddConfirmation = ElementLibraryAddConfirmation;
 const ElementInstallConfirmation = ({ state }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const { currentPlan, missingPackages, newPlan, onClose, request, sourceIsUnverified, sourceLabel, } = state;
     const sourcePreview = (0, react_1.useMemo)(() => makeSourceControlsVisible(request.element.sourceCode), [request.element.sourceCode]);
     const config = remotion_1.Internals.useUnsafeVideoConfig();
@@ -299,7 +300,7 @@ const ElementInstallConfirmation = ({ state }) => {
     const selectedFolderStack = newCompositionValues.folder.stack;
     const resolvedFolderLocation = (0, use_resolved_stack_1.useResolvedStack)(selectedFolderStack);
     const folderSymbolicatedStack = (0, react_1.useMemo)(() => (0, resolved_stack_to_symbolicated_1.resolvedStackToSymbolicated)(resolvedFolderLocation), [resolvedFolderLocation]);
-    const folderCompositionFile = (_a = folderSymbolicatedStack === null || folderSymbolicatedStack === void 0 ? void 0 : folderSymbolicatedStack.originalFileName) !== null && _a !== void 0 ? _a : null;
+    const folderCompositionFile = (_b = folderSymbolicatedStack === null || folderSymbolicatedStack === void 0 ? void 0 : folderSymbolicatedStack.originalFileName) !== null && _b !== void 0 ? _b : null;
     const [newCompositionPlanState, setNewCompositionPlanState] = (0, react_1.useState)({
         folderStack: null,
         type: 'ready',
@@ -388,7 +389,7 @@ const ElementInstallConfirmation = ({ state }) => {
         ? activeNewCompositionPlanState.plan
         : null;
     const selectedPlan = mode === 'current-composition' ? currentPlan : selectedNewCompositionPlan;
-    const elementBaseName = (_b = request.element.slug.split('/').at(-1)) !== null && _b !== void 0 ? _b : '';
+    const elementBaseName = (_c = request.element.slug.split('/').at(-1)) !== null && _c !== void 0 ? _c : '';
     const [refreshPlan, setRefreshPlan] = (0, react_1.useState)(0);
     const [input, setInput] = (0, react_1.useState)({
         basePlan: selectedPlan,
@@ -409,25 +410,42 @@ const ElementInstallConfirmation = ({ state }) => {
         });
     }
     const requestedName = input.name;
-    const [preparation, setPreparation] = (0, react_1.useState)(null);
-    const currentPreparation = (preparation === null || preparation === void 0 ? void 0 : preparation.basePlan) === selectedPlan &&
-        (preparation === null || preparation === void 0 ? void 0 : preparation.refresh) === refreshPlan &&
-        (preparation === null || preparation === void 0 ? void 0 : preparation.requestedName) === requestedName
-        ? preparation
-        : null;
-    const preparedInstallation = (_c = currentPreparation === null || currentPreparation === void 0 ? void 0 : currentPreparation.installation) !== null && _c !== void 0 ? _c : null;
-    const planError = (_d = currentPreparation === null || currentPreparation === void 0 ? void 0 : currentPreparation.error) !== null && _d !== void 0 ? _d : null;
-    const installationName = (_e = requestedName !== null && requestedName !== void 0 ? requestedName : preparedInstallation === null || preparedInstallation === void 0 ? void 0 : preparedInstallation.name) !== null && _e !== void 0 ? _e : elementBaseName;
-    const [existingInstallation, setExistingInstallation] = (0, react_1.useState)(null);
-    const existingDestination = (existingInstallation === null || existingInstallation === void 0 ? void 0 : existingInstallation.basePlan) === selectedPlan &&
-        (existingInstallation === null || existingInstallation === void 0 ? void 0 : existingInstallation.refresh) === refreshPlan
-        ? existingInstallation
-        : null;
+    const [preparations, setPreparations] = (0, react_1.useState)([]);
+    const currentPreparation = (_d = preparations.find((preparation) => preparation.basePlan === selectedPlan &&
+        preparation.refresh === refreshPlan &&
+        preparation.requestedName === requestedName)) !== null && _d !== void 0 ? _d : null;
+    const preparedInstallation = (_e = currentPreparation === null || currentPreparation === void 0 ? void 0 : currentPreparation.installation) !== null && _e !== void 0 ? _e : null;
+    const planError = (_f = currentPreparation === null || currentPreparation === void 0 ? void 0 : currentPreparation.error) !== null && _f !== void 0 ? _f : null;
+    const installationName = (_g = requestedName !== null && requestedName !== void 0 ? requestedName : preparedInstallation === null || preparedInstallation === void 0 ? void 0 : preparedInstallation.name) !== null && _g !== void 0 ? _g : elementBaseName;
+    const [existingInstallations, setExistingInstallations] = (0, react_1.useState)([]);
+    const existingDestination = (_h = existingInstallations.find((installation) => installation.basePlan === selectedPlan &&
+        installation.refresh === refreshPlan)) !== null && _h !== void 0 ? _h : null;
     const overwriteExisting = existingDestination !== null &&
         input.overwritePlan === existingDestination.plan;
     const activePlan = overwriteExisting
         ? existingDestination.plan
-        : ((_f = preparedInstallation === null || preparedInstallation === void 0 ? void 0 : preparedInstallation.plan) !== null && _f !== void 0 ? _f : null);
+        : ((_j = preparedInstallation === null || preparedInstallation === void 0 ? void 0 : preparedInstallation.plan) !== null && _j !== void 0 ? _j : null);
+    const [displayedPlans, setDisplayedPlans] = (0, react_1.useState)([]);
+    const rememberedDisplayedPlan = (_k = (_a = displayedPlans.find((displayed) => displayed.basePlan === selectedPlan &&
+        displayed.refresh === refreshPlan)) === null || _a === void 0 ? void 0 : _a.plan) !== null && _k !== void 0 ? _k : null;
+    const displayedPlan = (_l = activePlan !== null && activePlan !== void 0 ? activePlan : rememberedDisplayedPlan) !== null && _l !== void 0 ? _l : selectedPlan;
+    (0, react_1.useLayoutEffect)(() => {
+        if (activePlan === null || selectedPlan === null) {
+            return;
+        }
+        setDisplayedPlans((previous) => {
+            const existing = previous.find((displayed) => displayed.basePlan === selectedPlan &&
+                displayed.refresh === refreshPlan);
+            if ((existing === null || existing === void 0 ? void 0 : existing.plan) === activePlan) {
+                return previous;
+            }
+            return [
+                ...previous.filter((displayed) => displayed.basePlan !== selectedPlan ||
+                    displayed.refresh !== refreshPlan),
+                { basePlan: selectedPlan, refresh: refreshPlan, plan: activePlan },
+            ];
+        });
+    }, [activePlan, refreshPlan, selectedPlan]);
     (0, react_1.useEffect)(() => {
         if (selectedPlan === null) {
             return;
@@ -462,34 +480,44 @@ const ElementInstallConfirmation = ({ state }) => {
                     plan: result.plan,
                 };
                 if (result.plan.expectedFileState.exists) {
-                    setExistingInstallation((previous) => (previous === null || previous === void 0 ? void 0 : previous.basePlan) === selectedPlan &&
-                        previous.refresh === refreshPlan
+                    setExistingInstallations((previous) => previous.some((installation) => installation.basePlan === selectedPlan &&
+                        installation.refresh === refreshPlan)
                         ? previous
-                        : prepared);
+                        : [...previous, prepared]);
                     if (requestedName === null) {
                         candidate = `${elementBaseName}-copy${copyNumber === 1 ? '' : `-${copyNumber}`}`;
                         copyNumber++;
                         continue;
                     }
                 }
-                setPreparation({
-                    basePlan: selectedPlan,
-                    refresh: refreshPlan,
-                    requestedName,
-                    installation: prepared,
-                    error: null,
-                });
+                setPreparations((previous) => [
+                    ...previous.filter((preparation) => preparation.basePlan !== selectedPlan ||
+                        preparation.refresh !== refreshPlan ||
+                        preparation.requestedName !== requestedName),
+                    {
+                        basePlan: selectedPlan,
+                        refresh: refreshPlan,
+                        requestedName,
+                        installation: prepared,
+                        error: null,
+                    },
+                ]);
                 return;
             }
         })().catch((error) => {
             if (!canceled) {
-                setPreparation({
-                    basePlan: selectedPlan,
-                    refresh: refreshPlan,
-                    requestedName,
-                    installation: null,
-                    error: error instanceof Error ? error.message : String(error),
-                });
+                setPreparations((previous) => [
+                    ...previous.filter((preparation) => preparation.basePlan !== selectedPlan ||
+                        preparation.refresh !== refreshPlan ||
+                        preparation.requestedName !== requestedName),
+                    {
+                        basePlan: selectedPlan,
+                        refresh: refreshPlan,
+                        requestedName,
+                        installation: null,
+                        error: error instanceof Error ? error.message : String(error),
+                    },
+                ]);
             }
         });
         return () => {
@@ -624,9 +652,12 @@ const ElementInstallConfirmation = ({ state }) => {
                                     jsx_runtime_1.jsx("dt", { style: sectionTitleStyle, children: "From" }), jsx_runtime_1.jsx("dd", { style: sourceIsUnverified
                                             ? unverifiedRequestSourceStyle
                                             : requestSourceDescriptionStyle, children: sourceLabel })
-                                ] }), activePlan ? (jsx_runtime_1.jsxs("dl", { style: requestSourceStyle, children: [
-                                    jsx_runtime_1.jsx("dt", { style: sectionTitleStyle, children: "Destination" }), jsx_runtime_1.jsx("dd", { style: requestSourceDescriptionStyle, children: activePlan.filePath })
-                                ] })) : null, jsx_runtime_1.jsxs("div", { style: destinationControlStyle, children: [
+                                ] }), jsx_runtime_1.jsxs("dl", { style: {
+                                    ...requestSourceStyle,
+                                    visibility: displayedPlan === null ? 'hidden' : 'visible',
+                                }, "aria-hidden": displayedPlan === null, children: [
+                                    jsx_runtime_1.jsx("dt", { style: sectionTitleStyle, children: "Destination" }), jsx_runtime_1.jsx("dd", { style: requestSourceDescriptionStyle, children: (_m = displayedPlan === null || displayedPlan === void 0 ? void 0 : displayedPlan.filePath) !== null && _m !== void 0 ? _m : '\u00A0' })
+                                ] }), jsx_runtime_1.jsxs("div", { style: destinationControlStyle, children: [
                                     jsx_runtime_1.jsx("div", { style: sectionTitleStyle, children: "Add to" }), jsx_runtime_1.jsx("div", { "aria-label": "Add to", role: "group", style: { marginLeft: 'auto' }, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: destinationOptions, needsWrapping: false, size: "medium" }) })
                                 ] }), currentPlan === null ? (jsx_runtime_1.jsxs("div", { style: warningStyle, role: "status", children: [
                                     jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsxs("p", { style: warningDescriptionStyle, children: ["Studio could not find a safe place in \u201C", request.compositionId, "\u201D to insert the Element. Install it into a new composition instead."] })

package/dist/components/FilePreview.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const JSONViewer_1 = require("./JSONViewer");
 const layout_1 = require("./layout");
+const LutPreview_1 = require("./LutPreview");
 const TextViewer_1 = require("./TextViewer");
 const msgStyle = {
     fontSize: 13,
@@ -104,6 +105,9 @@ const FilePreview = ({ fileType, src, currentAsset, assetMetadata }) => {
     if (fileType === 'font') {
         return jsx_runtime_1.jsx(FontPreview, { src: src });
     }
+    if (fileType === 'lut') {
+        return jsx_runtime_1.jsx(LutPreview_1.LutPreview, { src: src }, src);
+    }
     if (fileType === 'json') {
         return jsx_runtime_1.jsx(JSONViewer_1.JSONViewer, { src: src });
     }

package/dist/components/FixComputedValueModal.js

@@ -3,19 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FixComputedValueModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const resolve_file_source_1 = require("../error-overlay/react-overlay/effects/resolve-file-source");
+const OpenInEditor_1 = require("../error-overlay/remotion-overlay/OpenInEditor");
+const StackFrame_1 = require("../error-overlay/remotion-overlay/StackFrame");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
-const copy_text_1 = require("../helpers/copy-text");
-const use_copy_feedback_1 = require("../helpers/use-copy-feedback");
-const copy_1 = require("../icons/copy");
-const skills_1 = require("../icons/skills");
-const CodingAgentButton_1 = require("./CodingAgentButton");
-const InlineAction_1 = require("./InlineAction");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const AgentPrompt_1 = require("./AgentPrompt");
 const ModalContainer_1 = require("./ModalContainer");
-const ModalFooter_1 = require("./ModalFooter");
 const ModalHeader_1 = require("./ModalHeader");
 const DismissableModal_1 = require("./NewComposition/DismissableModal");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const SettingsContext_1 = require("./SettingsContext");
+const use_default_editor_info_1 = require("./use-default-editor-info");
 const panelStyle = {
     borderRadius: 6,
     display: 'flex',
@@ -36,99 +34,69 @@ const text = {
     fontSize: 14,
     lineHeight: 1.5,
 };
-const commandField = {
-    alignItems: 'flex-start',
-    background: colors_1.BLACK_ALPHA_30,
-    borderRadius: 6,
-    boxSizing: 'border-box',
-    display: 'flex',
-    gap: 8,
-    marginTop: 10,
-    padding: '8px 8px 8px 10px',
-    width: '100%',
-};
-const code = {
-    color: colors_1.WHITE,
-    flex: 1,
-    fontFamily: 'monospace',
-    fontSize: 13,
-    lineHeight: 1.5,
-    margin: 0,
-    minWidth: 0,
-    overflowWrap: 'anywhere',
-    whiteSpace: 'pre-wrap',
-};
-const copyAction = {
-    flexShrink: 0,
+const sourcePreviewContainer = {
+    marginBottom: 16,
+    marginTop: 4,
 };
-const skillsIcon = {
-    display: 'inline-block',
-    height: 18,
-    width: 18,
-    marginRight: 6,
-    verticalAlign: 'middle',
-};
-const copyIcon = {
-    flexShrink: 0,
-    height: 12,
-    width: 12,
-};
-const footer = {
-    display: 'flex',
-    flex: 'none',
-    minWidth: 0,
-    padding: '12px 16px',
-    justifyContent: 'flex-end',
+const sourcePreviewStatus = {
+    ...text,
+    marginBottom: 16,
+    marginTop: 10,
 };
 const FixComputedValueModal = ({ state }) => {
     var _a;
-    const { codingAgentInfo } = (0, SettingsContext_1.useSettings)();
-    const skillName = '/remotion-interactivity';
-    const promptDetails = ` ${state.context} make "${state.prop}" interactive`;
-    const prompt = `${skillName}${promptDetails}`;
-    const installCommand = 'npx remotion skills add';
-    const hasCodingAgent = ((_a = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.length) !== null && _a !== void 0 ? _a : 0) > 0;
-    const { copied: promptCopied, markCopied: markPromptCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
-    const { copied: installCommandCopied, markCopied: markInstallCommandCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
-    const onCopyPrompt = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(prompt)
-            .then(markPromptCopied)
-            .catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
-        });
-    }, [markPromptCopied, prompt]);
-    const onCopyInstallCommand = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(installCommand)
-            .then(markInstallCommandCopied)
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { canOpenInEditor, defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
+    const [sourcePreview, setSourcePreview] = (0, react_1.useState)({
+        type: 'loading',
+    });
+    const promptLocation = sourcePreview.type === 'loaded'
+        ? `${sourcePreview.stack.originalFileName}:${sourcePreview.stack.originalLineNumber}:${sourcePreview.stack.originalColumnNumber}`
+        : `${state.location.source}:${state.location.line}:${state.location.column}`;
+    const promptDetails = ` ${promptLocation} make "${state.prop}" interactive`;
+    const canOpenSourceInEditor = sourcePreview.type === 'loaded' &&
+        canOpenInEditor &&
+        defaultEditorId !== null &&
+        defaultEditorName !== null;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        let cancelled = false;
+        setSourcePreview({ type: 'loading' });
+        (0, open_in_editor_1.findOriginalPositionInFileAtProperty)({
+            originalPosition: state.location,
+            property: (_a = state.prop.split('.').at(-1)) !== null && _a !== void 0 ? _a : state.prop,
+        })
+            .then((position) => {
+            return (0, resolve_file_source_1.resolveFileSource)({
+                columnNumber: position.column,
+                fileName: position.source,
+                lineNumber: position.line,
+                message: `Computed value "${state.prop}"`,
+            }, 1);
+        })
+            .then((stack) => {
+            if (!cancelled) {
+                setSourcePreview({ type: 'loaded', stack });
+            }
+        })
             .catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
+            if (!cancelled) {
+                setSourcePreview({
+                    type: 'error',
+                    message: err instanceof Error ? err.message : String(err),
+                });
+            }
         });
-    }, [installCommand, markInstallCommandCopied]);
-    const renderPromptCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: promptCopied, color: color, style: copyIcon });
-    }, [promptCopied]);
-    const renderInstallCommandCopyAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: installCommandCopied, color: color, style: copyIcon }));
-    }, [installCommandCopied]);
+        return () => {
+            cancelled = true;
+        };
+    }, [state.location, state.prop]);
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Fix computed value" }), jsx_runtime_1.jsxs("div", { style: container, children: [state.remotionInteractivitySkillAvailable ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx("div", { style: text, children: "First, install the Remotion Agent Skills:" }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
-                                    jsx_runtime_1.jsx("pre", { style: code, children: installCommand }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { style: copyAction, variant: null, onClick: onCopyInstallCommand, renderAction: renderInstallCommandCopyAction, title: "Copy command" })
-                                ] })
-                        ] })), jsx_runtime_1.jsx("div", { style: {
-                            ...text,
-                            marginTop: state.remotionInteractivitySkillAvailable ? 0 : 16,
-                        }, children: state.remotionInteractivitySkillAvailable
-                            ? 'Paste this prompt into your coding agent to make this value editable in Studio:'
-                            : 'Then, paste this prompt into your coding agent:' }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
-                            jsx_runtime_1.jsxs("pre", { style: code, children: [
-                                    jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: colors_1.BLUE, style: skillsIcon, "aria-hidden": true }), jsx_runtime_1.jsx("span", { style: {
-                                            color: colors_1.BLUE,
-                                            fontFamily: 'inherit',
-                                            fontSize: 'inherit',
-                                            lineHeight: 'inherit',
-                                        }, children: skillName }), promptDetails] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { style: copyAction, variant: null, onClick: onCopyPrompt, renderAction: renderPromptCopyAction, title: "Copy prompt" })
-                        ] })
-                ] }), hasCodingAgent ? (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsx(CodingAgentButton_1.CodingAgentButton, { label: "Open in", prompt: prompt, size: "compact", style: null }) })) : null] }));
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Fix computed value" }), jsx_runtime_1.jsxs("div", { style: container, children: [
+                    jsx_runtime_1.jsx("div", { style: text, children: "This value cannot be interactively edited because it is computed:" }), sourcePreview.type === 'loaded' ? (jsx_runtime_1.jsx("div", { style: sourcePreviewContainer, children: jsx_runtime_1.jsx(StackFrame_1.StackElement, { collapsible: false, defaultFunctionName: null, editorId: canOpenInEditor ? defaultEditorId : null, fontSize: 13, headerAction: canOpenSourceInEditor ? (jsx_runtime_1.jsx(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: false, editorId: defaultEditorId, editorName: defaultEditorName, size: "compact", stack: sourcePreview.stack })) : null, horizontalSpacing: 0, isFirst: true, lineNumberWidth: String(Math.max(0, ...((_a = sourcePreview.stack.originalScriptCode) !== null && _a !== void 0 ? _a : []).map((line) => line.lineNumber))).length, s: sourcePreview.stack }) })) : (jsx_runtime_1.jsx("div", { style: sourcePreviewStatus, children: sourcePreview.type === 'loading'
+                            ? 'Loading code preview...'
+                            : `Could not load code preview: ${sourcePreview.message}` })), jsx_runtime_1.jsx(AgentPrompt_1.AgentPrompt, { availableText: "Use this prompt to make this value editable:", promptDetails: promptDetails, skillId: "remotion-interactivity" })
+                ] })
+        ] }));
 };
 exports.FixComputedValueModal = FixComputedValueModal;

package/dist/components/GenerateWithAgentModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ModalState } from '../state/modals';
+type State = Extract<ModalState, {
+    type: 'generate-with-agent';
+}>;
+export declare const GenerateWithAgentModal: React.FC<{
+    readonly state: State;
+}>;
+export {};

package/dist/components/GenerateWithAgentModal.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenerateWithAgentModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const format_file_location_1 = require("../helpers/format-file-location");
+const AgentPrompt_1 = require("./AgentPrompt");
+const ModalContainer_1 = require("./ModalContainer");
+const ModalHeader_1 = require("./ModalHeader");
+const DismissableModal_1 = require("./NewComposition/DismissableModal");
+const panelStyle = {
+    borderRadius: 6,
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: (0, ModalContainer_1.getMaxModalHeight)(800),
+    minWidth: 0,
+    overflow: 'hidden',
+    width: (0, ModalContainer_1.getMaxModalWidth)(560),
+};
+const container = { padding: 16 };
+const text = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    marginBottom: 16,
+};
+const GenerateWithAgentModal = ({ state, }) => {
+    const location = (0, format_file_location_1.formatFileLocation)({
+        location: state.location,
+        root: window.remotion_cwd,
+    });
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Generate with agent" }), jsx_runtime_1.jsxs("div", { style: container, children: [
+                    jsx_runtime_1.jsx("div", { style: text, children: "Ask a coding agent to generate content in this composition." }), jsx_runtime_1.jsx(AgentPrompt_1.AgentPrompt, { availableText: "Start your prompt with:", promptDetails: location ? ` ${location}` : '', skillId: "remotion-markup" })
+                ] })
+        ] }));
+};
+exports.GenerateWithAgentModal = GenerateWithAgentModal;

package/dist/components/InlineEditableTitle.js

@@ -35,6 +35,7 @@ const titleGridItem = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const titleInput = {
@@ -52,6 +53,7 @@ const titleInput = {
     outline: 'none',
     overflow: 'hidden',
     padding: 0,
+    userSelect: 'text',
     WebkitAppearance: 'none',
     width: '100%',
 };